search page done

Co-authored-by: William Oldham <wegg7250@gmail.com>

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;
 }

src2/components/SelectBox.js

@@ -1,82 +1,91 @@
-import { useRef, useState, useEffect } from "react"
+import { useRef, useState, useEffect } from "react";
-import "./SelectBox.css"
+import "./SelectBox.css";
 
 function Option({ option, ...props }) {
-    return (
+  return (
-        <div className="option" {...props}>
+    <div className="option" {...props}>
-            <input
+      <input type="radio" className="radio" id={option.id} />
-                type="radio"
+      <label htmlFor={option.id}>
-                className="radio"
+        <div className="item">{option.name}</div>
-                id={option.id} />
+      </label>
-            <label htmlFor={option.id}>
+    </div>
-                <div className="item">{option.name}</div>
+  );
-            </label>
-        </div>
-    )
 }
 
 export function SelectBox({ options, selectedItem, setSelectedItem }) {
-    if (!Array.isArray(options)) {
+  if (!Array.isArray(options)) {
-        throw new Error("Items must be an array!")
+    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();
+  useEffect(() => {
-
+    // add when mounted
-    const handleClick = e => {
+    document.addEventListener("mousedown", handleClick);
-        if (containerRef.current.contains(e.target)) {
+    // return function to be called when unmounted
-            // inside click
+    return () => {
-            return;
+      document.removeEventListener("mousedown", handleClick);
-        }
-        // outside click
-        closeDropdown()
     };
-
-    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) => {
+  const onOptionClick = (e, option, i) => {
-        e.stopPropagation()
+    e.stopPropagation();
-        setSelectedItem(i)
+    setSelectedItem(i);
-        closeDropdown()
+    closeDropdown();
+  };
+
+  const handleSelectedKeyPress = (event) => {
+    if (event.code === "Enter" || event.code === "Space") {
+      setActive((a) => !a);
     }
+  };
 
-    const handleSelectedKeyPress = event => {
+  const handleOptionKeyPress = (option, i) => (event) => {
-        if (event.code === 'Enter' || event.code === 'Space'){
+    if (event.code === "Enter" || event.code === "Space") {
-            setActive(a => !a);
+      onOptionClick(event, option, i);
-        }
     }
+  };
 
-    const handleOptionKeyPress = (option, i) => event => {
+  return (
-        if (event.code === 'Enter' || event.code === 'Space'){
+    <div
-            onOptionClick(event, option, i);
+      className="select-box"
-        }
+      ref={containerRef}
-    }
+      onClick={() => setActive((a) => !a)}
-
+    >
-    return (
+      <div
-        <div className="select-box" ref={containerRef} onClick={() => setActive(a => !a)} >
+        className="selected"
-            <div className="selected" tabIndex={0} onKeyPress={handleSelectedKeyPress}>
+        tabIndex={0}
-                {options ? (
+        onKeyPress={handleSelectedKeyPress}
-                    <Option option={options[selectedItem]} />
+      >
-                ) : null}
+        {options ? <Option option={options[selectedItem]} /> : null}
-            </div>
+      </div>
-            <div className={"options-container" + (active ? " active" : "")}>
+      <div className={"options-container" + (active ? " active" : "")}>
-                {options.map((opt, i) => (
+        {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} />
+          <Option
-                ))}
+            option={opt}
-            </div>
+            key={i}
-        </div>
+            onClick={(e) => onOptionClick(e, opt, i)}
-    )
+            tabIndex={active ? 0 : undefined}
+            onKeyPress={active ? handleOptionKeyPress(opt, i) : undefined}
+          />
+        ))}
+      </div>
+    </div>
+  );
 }