5cc8ba26b2
Some checks failed
tests / ci (pull_request) Has been cancelled
- Changed user creation to use 'username' instead of 'name'. - Added UserProfile model with relationships to User and gender enum. - Updated validation rules for username and email. - Modified migrations to create user_profiles table and adjust users table. - Updated seeder to create users with profiles. - Translated various UI texts to Indonesian and improved layout components.
52 lines
2.2 KiB
TypeScript
52 lines
2.2 KiB
TypeScript
import { Link, usePage } from '@inertiajs/react';
|
|
import AppLogoIcon from '@/components/app-logo-icon';
|
|
import { home } from '@/routes';
|
|
import type { AuthLayoutProps } from '@/types';
|
|
|
|
export default function AuthSplitLayout({
|
|
children,
|
|
title,
|
|
description,
|
|
}: AuthLayoutProps) {
|
|
const { name } = usePage().props;
|
|
|
|
return (
|
|
<div className="relative grid h-dvh flex-col items-center justify-center px-8 sm:px-0 lg:max-w-none lg:grid-cols-2 lg:px-0">
|
|
<div className="relative hidden h-full flex-col bg-muted p-10 text-white lg:flex dark:border-r">
|
|
<div
|
|
className="absolute inset-0 bg-cover bg-center bg-no-repeat"
|
|
style={{
|
|
backgroundImage:
|
|
"url('https://images.pexels.com/photos/267507/pexels-photo-267507.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2')",
|
|
}}
|
|
/>
|
|
<div className="absolute inset-0 bg-black/60" />
|
|
<Link
|
|
href={home()}
|
|
className="relative z-20 flex items-center text-lg font-medium"
|
|
>
|
|
<AppLogoIcon className="mr-2 size-8 fill-current text-white" />
|
|
{name}
|
|
</Link>
|
|
</div>
|
|
<div className="w-full lg:p-8">
|
|
<div className="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]">
|
|
<Link
|
|
href={home()}
|
|
className="relative z-20 flex items-center justify-center lg:hidden"
|
|
>
|
|
<AppLogoIcon className="h-10 fill-current text-black sm:h-12" />
|
|
</Link>
|
|
<div className="flex flex-col items-start gap-2 text-left sm:items-center sm:text-center">
|
|
<h1 className="text-xl font-medium">{title}</h1>
|
|
<p className="text-sm text-balance text-muted-foreground">
|
|
{description}
|
|
</p>
|
|
</div>
|
|
{children}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|