Add components

frontend/src/app/components/select/SelectField.jsx

@@ -0,0 +1,71 @@
+"use client";
+import React, { useState, useRef, useEffect } from "react";
+import styles from "./styles.module.css";
+import ArrowDownIcon from "../icons/arrowDown";
+
+const SelectField = ({ label, options, ...props }) => {
+  const [showOptions, setShowOptions] = useState(false);
+  const [dropUp, setDropUp] = useState(false);
+
+  const selectRef = useRef(null);
+
+  const [currentSelected, setCurrentSelected] = useState({
+    label: label,
+    value: "",
+  });
+
+  useEffect(() => {
+    if (showOptions && selectRef.current) {
+      const rect = selectRef.current.getBoundingClientRect();
+      const spaceBelow = window.innerHeight - rect.bottom;
+      const spaceAbove = rect.top;
+      const dropdownHeight = 150;
+
+      if (spaceBelow < dropdownHeight && spaceAbove > dropdownHeight) {
+        setDropUp(true);
+      } else {
+        setDropUp(false);
+      }
+    }
+  }, [showOptions]);
+
+  return (
+    <div
+      ref={selectRef}
+      className={styles.select}
+      onClick={() => setShowOptions(!showOptions)}
+      {...props}
+    >
+      <label
+        className={`${styles.label} ${currentSelected.value ? styles.selected : ""}`}
+      >
+        {currentSelected.label}
+      </label>
+      <ArrowDownIcon />
+
+      {showOptions && (
+        <div
+          className={`${styles.optionsContainer} ${
+            dropUp ? styles.dropUp : ""
+          }`}
+        >
+          {options.map((opt, key) => {
+            return (
+              <div
+                key={key}
+                onClick={() => {
+                  setCurrentSelected(opt);
+                  setShowOptions(false);
+                }}
+              >
+                <p>{opt.label}</p>
+              </div>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default SelectField;