ADD Dropdown component for user actions

frontend/src/components/Dropdown.tsx

@@ -0,0 +1,65 @@
+import React, {useEffect, useRef} from "react";
+import clsx from "clsx";
+
+type DropdownItemProps = {
+    item: string;
+    onClick: (item: string) => void;
+    className?: string;
+}
+
+const DropdownItem = ({ item, onClick, className }: DropdownItemProps) => {
+    return (
+        <li className={clsx(className, "cursor-pointer hover:bg-gray-100 px-4 py-2 align-middle")} onClick={() => onClick(item)}>
+            {item}
+        </li>
+    );
+}
+
+type DropdownProps = {
+    label: string;
+    children: React.ReactNode;
+    className?: string;
+}
+
+const Dropdown = ({ label, children, className }: DropdownProps) => {
+    const [isOpen, setIsOpen] = React.useState(false);
+    const ref = useRef<HTMLDivElement>(null);
+
+    const toggleDropdown = () => {
+        setIsOpen(!isOpen);
+    };
+
+    useEffect(() => {
+        function handleClickOutside(event: { target: any; }) {
+            if (ref.current && !ref.current.contains(event.target)) {
+                setIsOpen(false);
+            }
+        }
+
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, []);
+
+    return (
+        <div className={clsx(className, "relative inline-block text-left")}
+            ref={ref}>
+            <button
+                onClick={toggleDropdown}
+                className="inline-flex justify-between w-full rounded-xl border border-gray-300 shadow-sm px-4 py-2 bg-white text-sm font-medium text-gray-600 hover:bg-gray-50"
+            >
+                {label}
+            </button>
+            {isOpen && (
+                <ul className="absolute w-48 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
+                    {children}
+                </ul>
+            )}
+        </div>
+    );
+};
+
+
+
+export { Dropdown, DropdownItem };