From 01d18aa4596118668bff20d5ad8f4488f482a797 Mon Sep 17 00:00:00 2001
From: Jelle van Snik <jellevs@gmail.com>
Date: Sun, 13 Feb 2022 18:48:52 +0100
Subject: [PATCH] search page done

Co-authored-by: William Oldham <wegg7250@gmail.com>
---
 src/index.css                |   2 +-
 src2/components/SelectBox.js | 141 +++++++++++++++++++----------------
 2 files changed, 76 insertions(+), 67 deletions(-)

diff --git a/src/index.css b/src/index.css
index bc384748..4775d9ef 100644
--- a/src/index.css
+++ b/src/index.css
@@ -4,5 +4,5 @@
 
 html,
 body {
-  @apply min-h-screen bg-dink-900 text-white font-open-sans;
+  @apply min-h-screen bg-denim-100 text-white font-open-sans;
 }
diff --git a/src2/components/SelectBox.js b/src2/components/SelectBox.js
index a094f910..743c559d 100644
--- a/src2/components/SelectBox.js
+++ b/src2/components/SelectBox.js
@@ -1,82 +1,91 @@
-import { useRef, useState, useEffect } from "react"
-import "./SelectBox.css"
+import { useRef, useState, useEffect } from "react";
+import "./SelectBox.css";
 
 function Option({ option, ...props }) {
-    return (
-        <div className="option" {...props}>
-            <input
-                type="radio"
-                className="radio"
-                id={option.id} />
-            <label htmlFor={option.id}>
-                <div className="item">{option.name}</div>
-            </label>
-        </div>
-    )
+  return (
+    <div className="option" {...props}>
+      <input type="radio" className="radio" id={option.id} />
+      <label htmlFor={option.id}>
+        <div className="item">{option.name}</div>
+      </label>
+    </div>
+  );
 }
 
 export function SelectBox({ options, selectedItem, setSelectedItem }) {
-    if (!Array.isArray(options)) {
-        throw new Error("Items must be an array!")
+  if (!Array.isArray(options)) {
+    throw new Error("Items must be an array!");
+  }
+
+  const [active, setActive] = useState(false);
+
+  const containerRef = useRef();
+
+  const handleClick = (e) => {
+    if (containerRef.current.contains(e.target)) {
+      // inside click
+      return;
     }
+    // outside click
+    closeDropdown();
+  };
 
-    const [active, setActive] = useState(false)
+  const closeDropdown = () => {
+    setActive(false);
+  };
 
-    const containerRef = useRef();
-
-    const handleClick = e => {
-        if (containerRef.current.contains(e.target)) {
-            // inside click
-            return;
-        }
-        // outside click
-        closeDropdown()
+  useEffect(() => {
+    // add when mounted
+    document.addEventListener("mousedown", handleClick);
+    // return function to be called when unmounted
+    return () => {
+      document.removeEventListener("mousedown", handleClick);
     };
-
-    const closeDropdown = () => {
-        setActive(false)
-    }
-
-    useEffect(() => {
-        // add when mounted
-        document.addEventListener("mousedown", handleClick);
-        // return function to be called when unmounted
-        return () => {
-            document.removeEventListener("mousedown", handleClick);
-        };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
+  }, []);
 
-    const onOptionClick = (e, option, i) => {
-        e.stopPropagation()
-        setSelectedItem(i)
-        closeDropdown()
+  const onOptionClick = (e, option, i) => {
+    e.stopPropagation();
+    setSelectedItem(i);
+    closeDropdown();
+  };
+
+  const handleSelectedKeyPress = (event) => {
+    if (event.code === "Enter" || event.code === "Space") {
+      setActive((a) => !a);
     }
+  };
 
-    const handleSelectedKeyPress = event => {
-        if (event.code === 'Enter' || event.code === 'Space'){
-            setActive(a => !a);
-        }
+  const handleOptionKeyPress = (option, i) => (event) => {
+    if (event.code === "Enter" || event.code === "Space") {
+      onOptionClick(event, option, i);
     }
+  };
 
-    const handleOptionKeyPress = (option, i) => event => {
-        if (event.code === 'Enter' || event.code === 'Space'){
-            onOptionClick(event, option, i);
-        }
-    }
-
-    return (
-        <div className="select-box" ref={containerRef} onClick={() => setActive(a => !a)} >
-            <div className="selected" tabIndex={0} onKeyPress={handleSelectedKeyPress}>
-                {options ? (
-                    <Option option={options[selectedItem]} />
-                ) : null}
-            </div>
-            <div className={"options-container" + (active ? " active" : "")}>
-                {options.map((opt, i) => (
-                    <Option option={opt} key={i} onClick={(e) => onOptionClick(e, opt, i)} tabIndex={active ? 0 : undefined} onKeyPress={active ? handleOptionKeyPress(opt, i) : undefined} />
-                ))}
-            </div>
-        </div>
-    )
+  return (
+    <div
+      className="select-box"
+      ref={containerRef}
+      onClick={() => setActive((a) => !a)}
+    >
+      <div
+        className="selected"
+        tabIndex={0}
+        onKeyPress={handleSelectedKeyPress}
+      >
+        {options ? <Option option={options[selectedItem]} /> : null}
+      </div>
+      <div className={"options-container" + (active ? " active" : "")}>
+        {options.map((opt, i) => (
+          <Option
+            option={opt}
+            key={i}
+            onClick={(e) => onOptionClick(e, opt, i)}
+            tabIndex={active ? 0 : undefined}
+            onKeyPress={active ? handleOptionKeyPress(opt, i) : undefined}
+          />
+        ))}
+      </div>
+    </div>
+  );
 }