feat: Add a custom select component

- We will use this as default html select component is not very customizable

Co-authored-by: Blaster4385 <[email protected]>

2 files changed, 74 insertions, 0 deletions

diff --git a/client/src/components/CustomSelect/CustomSelect.jsx b/client/src/components/CustomSelect/CustomSelect.jsx
new file mode 100644
index 0000000..9969a6d
--- /dev/null
+++ b/client/src/components/CustomSelect/CustomSelect.jsx
@@ -0,0 +1,42 @@
+import React, { useState } from "react";
+import styles from "./CustomSelect.module.css";
+
+const CustomSelect = ({ options, onSelect }) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [selectedOption, setSelectedOption] = useState(
+    options.length > 0 ? options[0] : null
+  );
+
+  const toggleDropdown = () => {
+    setIsOpen(!isOpen);
+  };
+
+  const handleOptionClick = (option) => {
+    setSelectedOption(option);
+    onSelect(option.value);
+    setIsOpen(false);
+  };
+
+  return (
+    <div className={styles.select}>
+      <div className={styles.selected__option} onClick={toggleDropdown}>
+        {selectedOption ? selectedOption.label : "Select an option"}
+      </div>
+      {isOpen && (
+        <div className={styles.options}>
+          {options.map((option) => (
+            <div
+              key={option.value}
+              className={styles.option}
+              onClick={() => handleOptionClick(option)}
+            >
+              {option.label}
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default CustomSelect;
diff --git a/client/src/components/CustomSelect/CustomSelect.module.css b/client/src/components/CustomSelect/CustomSelect.module.css
new file mode 100644
index 0000000..a3b6520
--- /dev/null
+++ b/client/src/components/CustomSelect/CustomSelect.module.css
@@ -0,0 +1,32 @@
+.select {
+  position: relative;
+  display: inline-block;
+}
+
+.selected__option {
+  cursor: pointer;
+  padding: 10px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+}
+
+.options {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  width: 100%;
+  border: 1px solid #ccc;
+  border-top: none;
+  border-radius: 0 0 4px 4px;
+  background-color: #ebdbb2;
+  z-index: 1;
+}
+
+.option {
+  padding: 10px;
+  color: #282828;
+  cursor: pointer;
+  &:hover {
+    background-color: #f0f0f0;
+  }
+}