28 lines
1.1 KiB
TypeScript
28 lines
1.1 KiB
TypeScript
|
import type { ReactNode } from 'react'
|
||
|
|
import { ThemeToggle } from './ThemeToggle'
|
||
|
|
|
||
|
|
export function AuthShell({ children }: { children: ReactNode }) {
|
||
|
|
return (
|
||
|
|
<div className="relative flex min-h-screen items-center justify-center overflow-hidden bg-canvas p-6">
|
||
|
|
<div className="absolute top-5 right-5 z-20">
|
||
|
|
<ThemeToggle />
|
||
|
|
</div>
|
||
|
|
<div
|
||
|
|
aria-hidden
|
||
|
|
className="glow-blob pointer-events-none absolute -top-24 -right-16 h-72 w-72 rounded-full opacity-70 blur-3xl"
|
||
|
|
/>
|
||
|
|
<div
|
||
|
|
aria-hidden
|
||
|
|
className="glow-blob-alt pointer-events-none absolute -bottom-20 -left-10 h-64 w-64 rounded-full opacity-80 blur-3xl"
|
||
|
|
/>
|
||
|
|
<div className="relative z-10 w-full max-w-md">
|
||
|
|
<div className="mb-8 text-center">
|
||
|
|
<p className="display-en text-xs font-semibold tracking-[0.2em] text-brand uppercase">Haixun Patrol</p>
|
||
|
|
<h1 className="mt-2 text-3xl font-black text-ink">巡樓管理系統</h1>
|
||
|
|
<p className="mt-2 text-sm text-ink-secondary">智慧巡檢 · 任務追蹤 · 即時協作</p>
|
||
|
|
</div>
|
||
|
|
{children}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|