shellphone.app/app/settings/pages/settings.tsx
2021-08-01 01:22:48 +08:00

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;