41 lines
1.3 KiB
TypeScript
41 lines
1.3 KiB
TypeScript
import { ArrowLeftIcon, SettingsIcon } from "@lume/icons";
|
|
import { type Platform } from "@tauri-apps/plugin-os";
|
|
import { Outlet, useLocation, useNavigate } from "react-router-dom";
|
|
import { WindowTitleBar } from "../titlebar";
|
|
|
|
export function AuthLayout({ platform }: { platform: Platform }) {
|
|
const location = useLocation();
|
|
const navigate = useNavigate();
|
|
|
|
const canGoBack = location.key === "default";
|
|
|
|
return (
|
|
<div className="flex flex-col w-screen h-screen bg-black text-neutral-50">
|
|
{platform !== "macos" ? (
|
|
<WindowTitleBar platform={platform} />
|
|
) : (
|
|
<div data-tauri-drag-region className="h-9 shrink-0" />
|
|
)}
|
|
<div className="relative w-full h-full">
|
|
<div className="absolute top-0 z-10 flex items-center justify-between w-full px-9">
|
|
{canGoBack ? (
|
|
<button
|
|
type="button"
|
|
onClick={() => navigate(-1)}
|
|
className="inline-flex items-center justify-center rounded-lg size-10 group"
|
|
>
|
|
<ArrowLeftIcon className="size-6 text-neutral-700 group-hover:text-neutral-500" />
|
|
</button>
|
|
) : (
|
|
<div />
|
|
)}
|
|
<div className="inline-flex items-center justify-center rounded-lg size-10 bg-neutral-950 group hover:bg-neutral-900">
|
|
<SettingsIcon className="size-6 text-neutral-700 group-hover:text-neutral-500" />
|
|
</div>
|
|
</div>
|
|
<Outlet />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|