37 lines
2.0 KiB
TypeScript
37 lines
2.0 KiB
TypeScript
import { Outlet } from "react-router-dom"
|
|
import { Command } from "lucide-react"
|
|
|
|
import { SettingsMenu } from "../components/SettingsMenu"
|
|
import { useTranslation } from "../hooks/useTranslation"
|
|
import { AuthSideVisual } from "./auth/AuthSideVisual"
|
|
|
|
export default function Auth() {
|
|
const { t } = useTranslation()
|
|
|
|
return (
|
|
<div className="container relative grid min-h-screen flex-col items-center justify-center bg-white transition-colors lg:h-screen lg:max-w-none lg:grid-cols-2 lg:overflow-hidden 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 overflow-hidden flex-col border-e border-slate-200 bg-slate-50 p-5 text-slate-950 dark:border-slate-800 dark:bg-slate-900/50 dark:text-white xl:p-6 2xl:p-10 lg:flex">
|
|
<div className="absolute inset-0 bg-[radial-gradient(circle_at_20%_20%,rgba(59,130,246,0.16),transparent_30%),radial-gradient(circle_at_80%_65%,rgba(16,185,129,0.12),transparent_32%)] dark:bg-[radial-gradient(circle_at_20%_20%,rgba(96,165,250,0.13),transparent_30%),radial-gradient(circle_at_80%_65%,rgba(45,212,191,0.09),transparent_32%)]" />
|
|
<div className="absolute inset-0 bg-[linear-gradient(to_right,rgba(15,23,42,0.05)_1px,transparent_1px),linear-gradient(to_bottom,rgba(15,23,42,0.05)_1px,transparent_1px)] bg-[size:4rem_4rem] opacity-50 dark:bg-[linear-gradient(to_right,rgba(255,255,255,0.04)_1px,transparent_1px),linear-gradient(to_bottom,rgba(255,255,255,0.04)_1px,transparent_1px)]" />
|
|
|
|
<div className="relative z-20 flex items-center gap-2 text-lg font-medium">
|
|
<Command className="h-6 w-6" />
|
|
{t.title || "Qlockify"}
|
|
</div>
|
|
|
|
<AuthSideVisual />
|
|
</div>
|
|
|
|
<div className="flex h-screen items-center justify-center p-5 sm:p-6 lg:p-6 2xl:p-8">
|
|
<div className="mx-auto flex w-full max-w-[26rem] flex-col justify-center">
|
|
<Outlet />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|