67 lines
2.0 KiB
TypeScript
67 lines
2.0 KiB
TypeScript
import { platform } from '@tauri-apps/api/os';
|
|
import { Outlet, useNavigate } from 'react-router-dom';
|
|
|
|
import { ArrowLeftIcon, ArrowRightIcon } from '@shared/icons';
|
|
|
|
const platformName = await platform();
|
|
|
|
export function AuthLayout() {
|
|
const navigate = useNavigate();
|
|
|
|
const goBack = () => {
|
|
navigate(-1);
|
|
};
|
|
|
|
const goForward = () => {
|
|
navigate(1);
|
|
};
|
|
|
|
return (
|
|
<div className="h-screen w-screen bg-zinc-50 text-zinc-900 dark:bg-zinc-950 dark:text-zinc-100">
|
|
<div className="flex h-screen w-full flex-col">
|
|
<div
|
|
data-tauri-drag-region
|
|
className="relative h-11 shrink-0 border border-zinc-100 bg-white dark:border-zinc-900 dark:bg-black"
|
|
>
|
|
<div
|
|
data-tauri-drag-region
|
|
className="flex h-full w-full flex-1 items-center px-2"
|
|
>
|
|
<div
|
|
className={`flex h-full items-center gap-2 ${
|
|
platformName === 'darwin' ? 'pl-[68px]' : ''
|
|
}`}
|
|
>
|
|
<button
|
|
type="button"
|
|
onClick={() => goBack()}
|
|
className="group inline-flex h-6 w-6 items-center justify-center rounded-md hover:bg-zinc-900"
|
|
>
|
|
<ArrowLeftIcon
|
|
width={16}
|
|
height={16}
|
|
className="text-zinc-500 group-hover:text-zinc-300"
|
|
/>
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => goForward()}
|
|
className="group inline-flex h-6 w-6 items-center justify-center rounded-md hover:bg-zinc-900"
|
|
>
|
|
<ArrowRightIcon
|
|
width={16}
|
|
height={16}
|
|
className="text-zinc-500 group-hover:text-zinc-300"
|
|
/>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="relative flex min-h-0 w-full flex-1">
|
|
<Outlet />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|