Breaking News: Grepper is joining You.com. Read the official announcement!

reusable select input component using tailwind

Rex Edge Design Studio answered on June 20, 2023 Popularity 2/10 Helpfulness 1/10

answer reusable select input component using tailwind

reusable select input component using tailwind

Comment

import React, { useState } from 'react';

export default function SelectInput({ options, className, label, onSelect }) {
  const [showOptions, setShowOptions] = useState(false);
  const [selectedOption, setSelectedOption] = useState(options[0]);

  const handleOptionSelect = (option) => {
    setSelectedOption(option);
    setShowOptions(false);
    if (onSelect) {
      onSelect(option);
    }
  };

  return (
    <div className={`relative ${className}`}>
      <div className="flex justify-start items-center flex-grow-0 flex-shrink-0 w-full h-14 gap-2 px-3 py-5 rounded-xl bg-gray-100/[0.32] border border-gray-100">
        <div className="flex justify-between items-center w-full relative" onClick={() => setShowOptions(!showOptions)}>
          <div className="flex-grow-0 w-3/4 flex-shrink-0 h-10 relative">
            <div className="flex flex-col justify-start items-start w-full h-10 absolute left-0 top-0 gap-1">
              <p className="self-stretch flex-grow-1 flex-shrink-0 w-full h-3 text-xs text-left text-[#4f4f4f]">
                {label}
              </p>
              <p className="self-stretch flex-grow-0 flex-shrink-0 w-full text-base text-left text-black">
                {selectedOption}
              </p>
            </div>
          </div>
          <div className="flex justify-start items-start flex-grow-0 flex-shrink-0">
            <div className={`flex justify-start items-start flex-grow-0 flex-shrink-0 relative ${showOptions ? 'rotate-180' : ''}`}>
              <svg
                width={24}
                height={24}
                viewBox="0 0 24 24"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
                className="transition-all duration-500 flex-grow-0 flex-shrink-0 w-6 h-6 relative"
                preserveAspectRatio="none"
              >
                <path
                  d="M19.92 8.94995L13.4 15.47C12.63 16.24 11.37 16.24 10.6 15.47L4.08002 8.94995"
                  stroke="#292D32"
                  strokeWidth="1.5"
                  strokeMiterlimit={10}
                  strokeLinecap="round"
                  strokeLinejoin="round"
                />
              </svg>
            </div>
          </div>
        </div>
      </div>
      {showOptions && (
        <div className="flex flex-col justify-start items-start flex-grow-0 flex-shrink-0 gap-4 absolute bg-white border border-gray-100 w-full shadow-sm p-5">
          {options.map((option, index) => (
            <div
              className="flex justify-start items-center flex-grow-0 flex-shrink-0 w-[292px] relative gap-2 p-2 rounded bg-[#fffffe]"
              key={index}
              onClick={() => handleOptionSelect(option)}
            >
              <p className="flex-grow-0 flex-shrink-0 w-[300px] text-sm text-left text-black">
                <input type="radio" name="type" checked={option === selectedOption} readOnly />
                {option}
              </p>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

Popularity 2/10 Helpfulness 1/10 Language typescript

Source: chat.openai.com

Tags: input select typescript using

Link to this answer
Share Copy Link

Contributed on Jun 20 2023

Rex Edge Design Studio

0 Answers Avg Quality 2/10

reusable select input component using tailwind

Contents

More Related Answers

reusable select input component using tailwind

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.