+ );
+}
+
+export default DropdownItem;
diff --git a/src/components/SortDropdownList.tsx b/src/components/SortDropdownList.tsx
new file mode 100644
index 0000000..575d421
--- /dev/null
+++ b/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(
+ 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(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 (
+
+ {/* For the menu trigger */}
+
setOpen(!open)}
+ >
+ Sort
+ {/* The arrow symbol */}
+
+
+
+ {/* For the dropdown options */}
+
+
+
+ {items.map((item, index) => (
+ setSelectedItem(item)} // set the selectedItem to that option and when it re-render it will be check by the line above
+ />
+ ))}
+