37 lines
1.3 KiB
TypeScript
37 lines
1.3 KiB
TypeScript
import { Outlet } from "react-router-dom"
|
|
import { Command } from "lucide-react"
|
|
|
|
import { SettingsMenu } from "../components/SettingsMenu"
|
|
import { useTranslation } from "../hooks/useTranslation"
|
|
|
|
export default function Auth() {
|
|
const { t } = useTranslation()
|
|
|
|
return (
|
|
<div className="container relative min-h-screen grid flex-col items-center justify-center bg-white transition-colors lg:max-w-none lg:grid-cols-2 lg:px-0 dark:bg-slate-950">
|
|
<div className="absolute inset-e-4 top-4 z-50 md:inset-e-8 md:top-8">
|
|
<SettingsMenu />
|
|
</div>
|
|
|
|
<div className="relative hidden h-full flex-col border-e border-slate-200 bg-slate-900 p-10 text-white dark:border-slate-800 dark:bg-slate-900/50 lg:flex">
|
|
<div className="relative z-20 flex items-center gap-2 text-lg font-medium">
|
|
<Command className="h-6 w-6" />
|
|
{t.title || "Qlockify"}
|
|
</div>
|
|
|
|
<div className="relative z-20 mt-auto">
|
|
<blockquote className="space-y-2">
|
|
<p className="text-lg">"{t.login.brandingQuote}"</p>
|
|
</blockquote>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex h-screen items-center justify-center p-8 lg:p-8">
|
|
<div className="mx-auto flex w-full max-w-[26rem] flex-col justify-center">
|
|
<Outlet />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|