59 lines
1.6 KiB
TypeScript
59 lines
1.6 KiB
TypeScript
import type { BlitzPage } 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 (
|
|
<Layout title="Settings">
|
|
<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>
|
|
</Layout>
|
|
);
|
|
};
|
|
|
|
Settings.authenticate = true;
|
|
|
|
export default Settings;
|