39 lines
1.2 KiB
TypeScript
39 lines
1.2 KiB
TypeScript
import type { ReactNode } from 'react'
|
|
import { AuthTicketIcon, SceneDecor } from './AuthDecor'
|
|
import { ThemeToggle } from './ThemeToggle'
|
|
|
|
export function AuthShell({
|
|
children,
|
|
tagline = '準備好巡樓了嗎？',
|
|
}: {
|
|
children: ReactNode
|
|
tagline?: string
|
|
}) {
|
|
return (
|
|
<div className="hx-scene auth-scene p-4 sm:p-6">
|
|
<SceneDecor />
|
|
|
|
<div className="absolute top-4 right-4 z-20 sm:top-5 sm:right-5">
|
|
<ThemeToggle compact />
|
|
</div>
|
|
|
|
<div className="auth-shell relative z-10 w-full max-w-xl">
|
|
<div className="auth-ticket">
|
|
<div className="auth-ticket-body ac-dialog-texture">
|
|
<div className="auth-welcome">
|
|
<AuthTicketIcon />
|
|
<div className="min-w-0 flex-1">
|
|
<p className="display-en text-[11px] font-semibold tracking-[0.16em] text-accent uppercase">
|
|
Haixun Patrol
|
|
</p>
|
|
<p className="text-lg font-bold leading-snug text-ink sm:text-xl">巡樓管理台</p>
|
|
<p className="mt-0.5 text-sm font-semibold text-brand">{tagline}</p>
|
|
</div>
|
|
</div>
|
|
{children}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
} |