import { Fragment, useState } from "react"; import { Disclosure, Menu, Switch, Transition } from "@headlessui/react"; import { MagnifyingGlassIcon } from "@heroicons/react/20/solid"; import { Bars3Icon, BellIcon, CogIcon, CreditCardIcon, KeyIcon, SquaresPlusIcon, UserCircleIcon, XMarkIcon, UsersIcon, } from "@heroicons/react/24/outline"; import { useRouter } from "next/router"; import Link from "next/link"; import Head from "next/head"; const user = { name: "Debbie Lewis", handle: "deblewis", email: "debbielewis@example.com", imageUrl: "https://images.unsplash.com/photo-1517365830460-955ce3ccd263?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=4&w=320&h=320&q=80", }; const subNavigation = [ { name: "Profile", href: "/settings/profile", icon: UserCircleIcon, current: true, }, { name: "Password", href: "/settings/password", icon: KeyIcon, current: false, }, { name: "Account", href: "/settings/account", icon: CogIcon, current: false, }, ]; function classNames(...classes: any) { return classes.filter(Boolean).join(" "); } export default function Setttings() { const [availableToHire, setAvailableToHire] = useState(true); const router = useRouter(); subNavigation.forEach((element) => { element.current = element.href == router.route; }); return (