Add the split-screen auth shell, switch prompt, and password toggle

This commit is contained in:
Aaron Po
2026-10-08 23:10:48 -04:00
parent 150515a948
commit 9968f4458a
3 changed files with 56 additions and 0 deletions

View File

@@ -0,0 +1,20 @@
interface AuthSplitLayoutProps {
headline: string;
blurb: string;
children: React.ReactNode;
}
const AuthSplitLayout = ({ headline, blurb, children }: AuthSplitLayoutProps) => (
<div className="grid flex-1 grid-cols-1 bg-base-200 lg:grid-cols-[minmax(0,5fr)_minmax(0,6fr)]">
<aside className="flex flex-col justify-end gap-5 bg-secondary px-5 py-7 text-secondary-content lg:px-14 lg:py-12">
<h2 className="text-3xl leading-[1.15] text-balance lg:text-[2.75rem]">{headline}</h2>
<p className="max-w-[23.75rem] text-base leading-relaxed lg:text-lg">{blurb}</p>
</aside>
<main className="flex items-start justify-center px-5 pt-7 pb-10 lg:items-center lg:px-6 lg:py-10">
{children}
</main>
</div>
);
export default AuthSplitLayout;

View File

@@ -0,0 +1,18 @@
import { Link } from 'react-router';
interface AuthSwitchPromptProps {
lead: string;
to: string;
label: string;
}
const AuthSwitchPrompt = ({ lead, to, label }: AuthSwitchPromptProps) => (
<p className="text-center text-[0.9375rem] text-[var(--color-muted)]">
{lead}{' '}
<Link to={to} className="font-semibold text-secondary hover:text-primary">
{label}
</Link>
</p>
);
export default AuthSwitchPrompt;

View File

@@ -0,0 +1,18 @@
import { Button } from '@headlessui/react';
interface ShowPasswordToggleProps {
shown: boolean;
onToggle: () => void;
}
const ShowPasswordToggle = ({ shown, onToggle }: ShowPasswordToggleProps) => (
<Button
type="button"
onClick={onToggle}
className="inline-flex min-h-11 items-center self-start text-[0.9375rem] font-semibold text-secondary hover:underline"
>
{shown ? 'Hide password' : 'Show password'}
</Button>
);
export default ShowPasswordToggle;