AbdulElahGwaith/free-react-tailwind-admin-dashboard

1import { useState } from "react";2import ComponentCard from "../../common/ComponentCard";3import Label from "../Label";4import Select from "../Select";5import MultiSelect from "../MultiSelect";6 7export default function SelectInputs() {8  const options = [9    { value: "marketing", label: "Marketing" },10    { value: "template", label: "Template" },11    { value: "development", label: "Development" },12  ];13  const handleSelectChange = (value: string) => {14    console.log("Selected value:", value);15  };16  const [selectedValues, setSelectedValues] = useState<string[]>([]);17 18  const multiOptions = [19    { value: "1", text: "Option 1", selected: false },20    { value: "2", text: "Option 2", selected: false },21    { value: "3", text: "Option 3", selected: false },22    { value: "4", text: "Option 4", selected: false },23    { value: "5", text: "Option 5", selected: false },24  ];25  return (26    <ComponentCard title="Select Inputs">27      <div className="space-y-6">28        <div>29          <Label>Select Input</Label>30          <Select31            options={options}32            placeholder="Select Option"33            onChange={handleSelectChange}34            className="dark:bg-dark-900"35          />36        </div>37        <div>38          <MultiSelect39            label="Multiple Select Options"40            options={multiOptions}41            defaultSelected={["1", "3"]}42            onChange={(values) => setSelectedValues(values)}43          />44          <p className="sr-only">45            Selected Values: {selectedValues.join(", ")}46          </p>47        </div>48      </div>49    </ComponentCard>50  );51}52