next-web/src/components/Dropdown.tsx

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

const userRoles: string[] = ["Member", "Employer"]

interface DropdownProps {
    page: "Member" | "Employer";
}

const Dropdown: React.FC<DropdownProps> = ({page}) => {
    const [isHovered, setIsHovered] = useState(false);

    let otherRoles: string[] = userRoles.filter(role => role !== page);

    return (
        <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;