mirror of
https://github.com/aaronpo97/the-biergarten-app.git
synced 2026-10-15 10:04:44 +00:00
Add the split-screen auth shell, switch prompt, and password toggle
This commit is contained in:
@@ -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;
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
Reference in New Issue
Block a user