First commit

src/components/form/form-elements/SelectInputs.tsx

@@ -0,0 +1,61 @@
+"use client";
+import React, { useState } from "react";
+import ComponentCard from "../../common/ComponentCard";
+import Label from "../Label";
+import Select from "../Select";
+import MultiSelect from "../MultiSelect";
+import { ChevronDownIcon } from "@/icons";
+
+export default function SelectInputs() {
+  const options = [
+    { value: "marketing", label: "Marketing" },
+    { value: "template", label: "Template" },
+    { value: "development", label: "Development" },
+  ];
+
+  const [selectedValues, setSelectedValues] = useState<string[]>([]);
+
+  const handleSelectChange = (value: string) => {
+    console.log("Selected value:", value);
+  };
+
+  const multiOptions = [
+    { value: "1", text: "Option 1", selected: false },
+    { value: "2", text: "Option 2", selected: false },
+    { value: "3", text: "Option 3", selected: false },
+    { value: "4", text: "Option 4", selected: false },
+    { value: "5", text: "Option 5", selected: false },
+  ];
+
+  return (
+    <ComponentCard title="Select Inputs">
+      <div className="space-y-6">
+        <div>
+          <Label>Select Input</Label>
+         <div className="relative">
+           <Select
+            options={options}
+            placeholder="Select Option"
+            onChange={handleSelectChange}
+            className="dark:bg-dark-900"
+          />
+          <span className="absolute text-gray-500 -translate-y-1/2 pointer-events-none right-3 top-1/2 dark:text-gray-400">
+              <ChevronDownIcon/>
+            </span>
+         </div>
+        </div>
+        <div className="relative">
+          <MultiSelect
+            label="Multiple Select Options"
+            options={multiOptions}
+            defaultSelected={["1", "3"]}
+            onChange={(values) => setSelectedValues(values)}
+          />
+          <p className="sr-only">
+            Selected Values: {selectedValues.join(", ")}
+          </p>
+        </div>
+      </div>
+    </ComponentCard>
+  );
+}