import type { BlitzPage } from "blitz"; import { Routes } from "blitz"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faCreditCard, faUserCircle } from "@fortawesome/pro-regular-svg-icons"; import Layout from "../../core/layouts/layout"; import appLogger from "../../../integrations/logger"; import useRequireOnboarding from "../../core/hooks/use-require-onboarding"; const logger = appLogger.child({ page: "/settings" }); /* eslint-disable react/display-name */ const navigation = [ { name: "Account", href: "/settings/account", icon: ({ className = "w-8 h-8" }) => ( <FontAwesomeIcon size="lg" className={className} icon={faUserCircle} /> ), }, { name: "Billing", href: "/settings/billing", icon: ({ className = "w-8 h-8" }) => ( <FontAwesomeIcon size="lg" className={className} icon={faCreditCard} /> ), }, ]; /* eslint-enable react/display-name */ const Settings: BlitzPage = () => { useRequireOnboarding(); return ( <> <div className="flex flex-col space-y-6 p-6"> <h2 className="text-3xl font-bold">Settings</h2> </div> <div className="flex flex-col space-y-6 p-6"> <aside className="py-6 lg:col-span-3"> <nav className="space-y-1"> {navigation.map((item) => ( <a key={item.name} href={item.href} className="border-transparent text-gray-900 hover:bg-gray-50 hover:text-gray-900 group border-l-4 px-3 py-2 flex items-center text-sm font-medium" > <item.icon className="text-gray-400 group-hover:text-gray-500 flex-shrink-0 -ml-1 mr-3 h-6 w-6" /> <span className="truncate">{item.name}</span> </a> ))} </nav> </aside> </div> </> ); }; Settings.getLayout = (page) => <Layout title="Settings">{page}</Layout>; Settings.authenticate = { redirectTo: Routes.SignIn() }; export default Settings;