homepage/landing pages 'done', dashboard started

src/components/Dropdown.tsx

@@ -1,84 +1,47 @@
 import React, { useState } from 'react'
 import Link from 'next/link';
 import classnames from 'classnames';
+import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/react'
+import { FaAngleDown } from "react-icons/fa";
 
-import Button from './Button';
-import { MenuItem } from './Navbar'
+const userRoles: string[] = ["Member", "Employer"]
 
-interface Props {
-    item: MenuItem;
+interface DropdownProps {
+    page: "Member" | "Employer";
 }
 
-export default function Dropdown(props: Props) {
-    const { item } = props;
-    const [isOpen, setIsOpen] = useState<boolean>(false);
-    const menuItems = item?.children ? item.children : [];
-    const lastIndex = menuItems.length - 1;
-    const itemId = item.id;
+const Dropdown: React.FC<DropdownProps> = ({page}) => {
+    const [isHovered, setIsHovered] = useState(false);
 
-    const toggle = () => {
-        setIsOpen(old => !old);
-    }
-
-    const transClass = isOpen
-        ?
-        "flex"
-        :
-        "hidden";
-    
-    function isLastItem (currentItem: MenuItem) {
-        return lastIndex == menuItems.indexOf(currentItem)
-    }
-
-    function isSecondItem (currentItem: MenuItem) {
-        return 1 == menuItems.indexOf(currentItem)
-    }
+    let otherRoles: string[] = userRoles.filter(role => role !== page);
 
     return (
-        <>
-            <div className="relative">
-                <Button
-                    className="hover:text-britton-light font-semibold text-lg"
-                    onClick={toggle}
-                >{item.title}</Button>
-                <div className={`absolute top-8 z-11 w-[150px] flex flex-col bg-stone-300 text-sm rounded-md ${transClass}`}>
-                    {
-                        menuItems.map(item =>
-                            <>
-                                <Link
-                                    key={item.id}
-                                    className={classnames(
-                                        "hover:text-britton-neutral text-center px-2 py-1",
-                                        {
-                                            "hover:bg-britton-newblue" : itemId == 'employers',
-                                            "hover:bg-britton-medium" : itemId != 'employers'
-                                        }
-                                    )}
-                                    href={item?.route || ''}
-                                    onClick={toggle}
-                                >
-                                    {item.title}
-                                </Link>
-                                <div className={classnames(
-                                        "h-px bg-britton-accent mx-2",
-                                        {"hidden" : isLastItem(item)}
-                                    )}
-                                />
-                            </>
-                        )
-                    }
-                </div>
-            </div>
-            {
-                isOpen
-                    ?
-                    <div
-                        className="fixed top-0 right-0 bottom-0 left-0 z-11 bg-britton-dark/40"
-                        onClick={toggle}
-                    ></div>
-                    :
-                    <></>
-            }
-        </>
-    )
-}
+        <div className="">
+            <Menu>
+                <MenuButton as="a" className={classnames(
+                    "text-bluemana decoration-bluemana underline hover:text-atmosphere hover:decoration-atmosphere flex items-end", 
+                        {
+                            'cursor-pointer': isHovered,
+                            'cursor-default': !isHovered,
+                        }
+                    )}
+                    onMouseEnter={() => setIsHovered(true)}
+                    onMouseLeave={() => setIsHovered(false)}
+                >
+                    {page}
+                </MenuButton>
+                <MenuItems anchor="bottom end" className={"py-2 bg-deepcove border border-copper focus:outline-hidden text-platinum text-md text-left font-semibold rounded-md divide-y divide-[#B8B8B8]"}>
+                    {otherRoles.map((role) => (
+                        <MenuItem as="div" className={"px-1"}>
+                            <a className="block data-focus:text-atmosphere hover:text-atmosphere" href={`/dashboard/${role.toLowerCase()}`}>
+                                Switch To {role} Role
+                            </a>
+                        </MenuItem>
+                    ))}
+                </MenuItems>
+            </Menu>
+        </div>
+    );
+};
+
+export default Dropdown;