Implement sort dropdown list

package.json

@@ -22,7 +22,7 @@
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.21.4",
     "@types/jest": "^29.5.0",
-    "@types/react": "^18.0.27",
+    "@types/react": "^18.2.51",
     "@types/react-dom": "^18.0.10",
     "@types/react-test-renderer": "^18.0.0",
     "@vitejs/plugin-react": "^3.1.0",

src/App.tsx

@@ -2,10 +2,10 @@ import {
   createBrowserRouter,
   RouterProvider,
 } from "react-router-dom";
-
-// routes
+import Test from "./routes/Test";
+import DropdownItem from "./components/DropdownItem";
+import SortDropdownListTestRoute from "./routes/SortDropdownListTestRoute";
 import NavigaionTest from "./routes/NavigationTest";
-import Test from "@/routes/Test";
 
 const router = createBrowserRouter([
   {
@@ -16,10 +16,15 @@ const router = createBrowserRouter([
     path: "/test",
     element: <Test />,
   },
+  {
+    path: "/SortDropdownListTestRoute",
+    element: <SortDropdownListTestRoute />,
+  },
   {
     path: "/nav-test",
     element: <NavigaionTest />,
   },
+
 ]);
 
 function App() {

src/components/DropdownItem.tsx

@@ -0,0 +1,18 @@
+// As shown in TestSquareProps
+export interface DropdownItemProps {
+    text: string;
+    isSelected: boolean;
+    onSelect: () => void;
+}
+
+function DropdownItem({ text, isSelected, onSelect }:DropdownItemProps) {
+    return (
+        <li
+            className={`py-1 pr-4 pl-2 rounded-lg h-8 hover:bg-neutrals-light-500 cursor-pointer ${isSelected ? 'font-bold' : 'font-normal'}`} onClick={onSelect}>
+
+            <a className=" text-neutrals-dark-500 font-display">{text}</a>
+        </li>
+    );
+}
+
+export default DropdownItem;

src/components/SortDropdownList.tsx

@@ -0,0 +1,82 @@
+import { useEffect, useRef, useState } from "react";
+import DropdownItem from "./DropdownItem";
+import { CaretDown } from "@phosphor-icons/react";
+
+function SortDropdownList() {
+  // Options that can be later add in
+  const items = [
+    "Newest to Oldest",
+    "Oldest to Newest",
+    "Most-Least Storage",
+    "Recently Updated",
+  ];
+
+  // State to keep track of the currently selected option
+  const [selectedItem, setSelectedItem] = useState<string | null>(
+    null
+  ); // useState expect either string or null var
+
+  // State to keep track of the menu is being open or not
+  const [open, setOpen] = useState(false);
+
+  // Check if user click outside of the menu to close it
+  let menuRef = useRef<HTMLInputElement>(null); // Typescript like this
+
+  useEffect(() => {
+    let handler = (e: any) => {
+      if (menuRef.current && !menuRef.current.contains(e.target)) {
+        // Check menuRef.current is not null before calling .contains
+        setOpen(false);
+      }
+    };
+
+    document.addEventListener("mousedown", handler);
+
+    return () => {
+      // Clean up to prevent memory leaks and avoid running outdated event handlers
+      document.removeEventListener("mousedown", handler);
+    };
+  }, []);
+
+  return (
+    <div className="relative w-full" ref={menuRef}>
+      {/* For the menu trigger */}
+      <div
+        className={`w-full cursor-pointer font-body h-10 bg-status-blue-light flex justify-between items-center px-4 py-2 ${
+          open ? "rounded-t-lg mb-2" : "rounded-lg"
+        } `}
+        onClick={() => setOpen(!open)}
+      >
+        Sort
+        {/* The arrow symbol */}
+        <CaretDown size={24} />
+      </div>
+
+      {/* For the dropdown options */}
+      <div
+        className={`bg-status-blue-light p-4 rounded-b-lg z-10 absolute w-full ${
+          open ? "visible opacity-1" : "invisible opacity-0"
+        }`}
+      >
+        <div className={`flex flex-col gap-2`}>
+          <ul>
+            {items.map((item, index) => (
+              <DropdownItem
+                key={index}
+                text={item}
+                isSelected={selectedItem === item} // Check if matched with the selected option
+                onSelect={() => setSelectedItem(item)} // set the selectedItem to that option and when it re-render it will be check by the line above
+              />
+            ))}
+          </ul>
+          {/* for fun */}
+          <button className="text-white border bg-primary-main">
+            Reset
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default SortDropdownList;

src/routes/SortDropdownListTestRoute.tsx

@@ -0,0 +1,19 @@
+import DropdownItem from "../components/DropdownItem";
+import SortDropdownList from "../components/SortDropdownList";
+
+function SortDropdownListTestRoute() {
+  return (
+    <div className="flex flex-col items-center justify-center min-h-screen">
+      <div className="text-h2">Hello</div>
+      <div className="text-body-reg">
+        Is this the sort dropdown list that you looking for?😩
+      </div>
+      <div className="w-1/4">
+        <SortDropdownList />
+      </div>
+      <div>What happen If I do this?</div>
+    </div>
+  );
+}
+
+export default SortDropdownListTestRoute;