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;

frontend/src/app/components/select/styles.module.css

@@ -0,0 +1,83 @@
+.select {
+  display: flex;
+  padding: 12px;
+  align-items: flex-start;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  align-self: stretch;
+  border-radius: 4px;
+  border: 1px solid #4b4f6d;
+  background-color: transparent;
+  position: relative;
+}
+.label {
+  color: #858699;
+  font-family: Inter;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
+.selected {
+  color: white;
+}
+.optionsContainer {
+  display: flex;
+  padding: 6px;
+  flex-direction: column;
+  align-items: flex-start;
+  align-self: stretch;
+  position: absolute;
+  width: 100%;
+  left: 0;
+  border-radius: 6px;
+  border: 1px solid #353a4c;
+  background: #282b39;
+  animation-name: showDD;
+  animation-duration: 200ms;
+  z-index: 20;
+}
+
+@keyframes showDD {
+  0% {
+    opacity: 0;
+    transform: translateY(-10%);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0%);
+  }
+}
+.optionsContainer > div {
+  display: flex;
+  padding: 8px;
+  align-items: center;
+  gap: 10px;
+  align-self: stretch;
+  border-radius: 4px;
+}
+.optionsContainer p {
+  color: #acb0ff;
+  font-family: Inter;
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
+.optionsContainer > div:hover,
+.optionsContainer > div:hover p {
+  background: #3c4159;
+  color: white;
+}
+.optionsContainer {
+  top: 0%;
+  margin-top: 6px;
+}
+
+/* When flipping upward */
+.dropUp {
+  bottom: 0%;
+  top: auto;
+  margin-bottom: 6px;
+}