shellphone.app/app/settings/components/settings-layout.tsx

94 lines
3.1 KiB
TypeScript
Raw Normal View History

2021-07-31 17:22:48 +00:00
import type { FunctionComponent } from "react";
import { Suspense } from "react";
2021-10-15 20:30:57 +00:00
import { Link, Routes, useMutation, useRouter } from "blitz";
2021-09-29 22:10:42 +00:00
import clsx from "clsx";
2021-10-15 20:30:57 +00:00
import {
IoChevronBack,
IoLogOutOutline,
IoNotificationsOutline,
IoCardOutline,
2021-10-15 22:24:28 +00:00
IoCallOutline,
2021-10-15 20:30:57 +00:00
IoPersonCircleOutline,
} from "react-icons/io5";
2021-07-31 17:22:48 +00:00
import AppLayout from "app/core/layouts/layout";
2021-10-15 20:30:57 +00:00
import Divider from "./divider";
import Spinner from "../../core/components/spinner";
import logout from "app/auth/mutations/logout";
2021-07-31 17:22:48 +00:00
2021-09-29 22:10:42 +00:00
const subNavigation = [
{ name: "Account", href: Routes.Account(), icon: IoPersonCircleOutline },
2021-10-15 22:24:28 +00:00
{ name: "Phone", href: Routes.PhoneSettings(), icon: IoCallOutline },
{ name: "Billing", href: Routes.Billing(), icon: IoCardOutline },
2021-09-29 22:10:42 +00:00
{ name: "Notifications", href: Routes.Notifications(), icon: IoNotificationsOutline },
];
2021-07-31 17:22:48 +00:00
const SettingsLayout: FunctionComponent = ({ children }) => {
const router = useRouter();
2021-10-15 20:30:57 +00:00
const [logoutMutation] = useMutation(logout);
2021-07-31 17:22:48 +00:00
return (
<AppLayout title="Settings">
2021-09-29 22:10:42 +00:00
<header className="bg-gray-100 px-2 sm:px-6 lg:px-8">
2021-07-31 17:22:48 +00:00
<header className="flex">
<span className="flex items-center cursor-pointer" onClick={router.back}>
<IoChevronBack className="h-8 w-8 mr-2" /> Back
2021-07-31 17:22:48 +00:00
</span>
</header>
</header>
2021-09-29 22:35:05 +00:00
<main className="flex flex-col flex-grow mx-auto w-full max-w-7xl pb-10 lg:py-12 lg:px-8">
<div className="flex flex-col flex-grow lg:grid lg:grid-cols-12 lg:gap-x-5">
2021-09-29 22:10:42 +00:00
<aside className="py-6 px-2 sm:px-6 lg:py-0 lg:px-0 lg:col-span-3">
2021-10-15 22:24:28 +00:00
<nav className="space-y-1 h-full flex flex-col">
2021-09-29 22:10:42 +00:00
{subNavigation.map((item) => {
const isCurrentPage = item.href.pathname === router.pathname;
return (
<Link key={item.name} href={item.href} prefetch>
2021-09-29 22:10:42 +00:00
<a
className={clsx(
isCurrentPage
? "bg-gray-50 text-primary-600 hover:bg-white"
2021-09-29 22:10:42 +00:00
: "text-gray-900 hover:text-gray-900 hover:bg-gray-50",
2021-10-15 22:24:28 +00:00
"group rounded-md px-3 py-2 flex items-center text-sm font-medium",
2021-09-29 22:10:42 +00:00
)}
aria-current={isCurrentPage ? "page" : undefined}
>
<item.icon
className={clsx(
isCurrentPage
? "text-primary-500"
2021-09-29 22:10:42 +00:00
: "text-gray-400 group-hover:text-gray-500",
"flex-shrink-0 -ml-1 mr-3 h-6 w-6",
)}
aria-hidden="true"
/>
<span className="truncate">{item.name}</span>
</a>
</Link>
);
})}
2021-10-15 20:30:57 +00:00
2021-10-15 22:24:28 +00:00
<Divider />
2021-10-15 20:30:57 +00:00
<button
onClick={() => logoutMutation()}
className="group text-gray-900 hover:text-gray-900 hover:bg-gray-50 rounded-md px-3 py-2 flex items-center text-sm font-medium"
>
<IoLogOutOutline className="text-gray-400 group-hover:text-gray-500 flex-shrink-0 -ml-1 mr-3 h-6 w-6" />
Log out
</button>
2021-09-29 22:10:42 +00:00
</nav>
</aside>
<div className="flex-grow overflow-y-auto space-y-6 px-2 sm:px-6 lg:col-span-9">
<Suspense fallback={<Spinner />}>{children}</Suspense>
</div>
2021-09-29 22:10:42 +00:00
</div>
</main>
</AppLayout>
2021-07-31 17:22:48 +00:00
);
};
export default SettingsLayout;