Files
nyone/resources/js/layouts/auth/auth-simple-layout.tsx
2026-05-18 05:47:02 +03:30

46 lines
1.9 KiB
TypeScript

import { Link } from '@inertiajs/react';
import AppLogoIcon from '@/components/app-logo-icon';
import { LanguageSwitcher } from '@/components/language-switcher';
import { useTranslation } from '@/lib/translations';
import { home } from '@/routes';
import type { AuthLayoutProps } from '@/types';
export default function AuthSimpleLayout({
children,
title,
description,
}: AuthLayoutProps) {
const { t } = useTranslation();
return (
<div className="relative flex min-h-svh flex-col items-center justify-center gap-6 bg-background p-6 md:p-10">
<LanguageSwitcher className="absolute end-4 top-4" />
<div className="w-full max-w-sm rounded-md border bg-card p-6 shadow-sm">
<div className="flex flex-col gap-8">
<div className="flex flex-col items-center gap-4">
<Link
href={home()}
className="flex flex-col items-center gap-2 font-medium"
>
<div className="mb-1 flex size-10 items-center justify-center rounded-md bg-primary text-primary-foreground">
<AppLogoIcon className="size-6 fill-current" />
</div>
<span className="sr-only">{t(title ?? '')}</span>
</Link>
<div className="space-y-2 text-center">
<h1 className="text-xl font-semibold">
{t(title ?? '')}
</h1>
<p className="text-center text-sm text-muted-foreground">
{t(description ?? '')}
</p>
</div>
</div>
{children}
</div>
</div>
</div>
);
}