Dropdown

A customizable dropdown component.

Galaxy Dropdown

A intergalactic dropdown for selection.

Preview

Choose an option

import React, { useState } from "react";

const Dropdown = () => {
  const [isOpen, setIsOpen] = useState(false);
  const [selectedOption, setSelectedOption] = useState(null);

  const options = ["Galaxy Dropdown", "Nebula Dropdown", "Earth Dropdown"];

  const handleOptionClick = (option) => {
    setSelectedOption(option);
    setIsOpen(false);
  };

  return (
    <div className="relative inline-block w-64">
      <label className="block text-gray-700 mb-2">Choose an option</label>
      <button
        onClick={() => setIsOpen(!isOpen)}
        className="w-full bg-white text-gray-700 border border-gray-300 rounded-t-md px-4 py-2 text-left flex items-center justify-between"
      >
        {selectedOption || "Select an option"}
        <span className={`w-5 h-5 transition-transform ${isOpen ? "rotate-180" : ""}`}>
          ▼
        </span>
      </button>
      {isOpen && (
        <ul className="absolute z-10 mt-2 w-full bg-white border border-gray-300 rounded-b-md shadow-lg">
          {options.map((option, index) => (
            <li
              key={index}
              onClick={() => handleOptionClick(option)}
              className="px-4 py-2 cursor-pointer hover:bg-gray-100"
            >
              {option}
            </li>
          ))}
        </ul>
      )}
    </div>
  );
};

export default Dropdown;

Usage Example

import React from "react";
import Dropdown from "./components/comp/Dropdown/GalaxyDropdown";

const App = () => {
  return (
    <div>
      <Dropdown />
    </div>
  );
};

export default App;