shellphone.app/app/settings/pages/settings.tsx
2021-08-28 14:03:49 +08:00

65 lines
2.0 KiB
TypeScript

import type { BlitzPage } from "blitz";
import { Routes, useMutation } 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";
import logout from "../../auth/mutations/logout";
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();
const [logoutMutation] = useMutation(logout);
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>
<button onClick={() => logoutMutation()}>Log out</button>
</div>
</>
);
};
Settings.getLayout = (page) => <Layout title="Settings">{page}</Layout>;
Settings.authenticate = { redirectTo: Routes.SignIn() };
export default Settings;