39 lines
1.4 KiB
TypeScript
39 lines
1.4 KiB
TypeScript
import { ShieldHalf } from "lucide-react";
|
|
import AuthCarousel from "./AuthCarousel";
|
|
|
|
export default function AuthShell({ title, subtitle, children }: {
|
|
title: string; subtitle?: string; children: React.ReactNode;
|
|
}) {
|
|
return (
|
|
<div className="min-h-screen grid lg:grid-cols-2">
|
|
{/* Left — form */}
|
|
<div className="flex flex-col justify-center px-6 sm:px-10 py-10">
|
|
<div className="w-full max-w-sm mx-auto">
|
|
<div className="flex items-center gap-2 font-extrabold text-xl mb-8">
|
|
<span className="h-9 w-9 rounded-lg bg-brand-600 text-white grid place-items-center">
|
|
<ShieldHalf className="h-5 w-5" />
|
|
</span>
|
|
VerifyPack
|
|
</div>
|
|
<h1 className="text-2xl font-extrabold">{title}</h1>
|
|
{subtitle && <p className="text-slate-500 mt-1 text-sm">{subtitle}</p>}
|
|
<div className="mt-6">{children}</div>
|
|
</div>
|
|
</div>
|
|
{/* Right — promo carousel */}
|
|
<AuthCarousel />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function Field({ label, ...props }: any) {
|
|
return (
|
|
<label className="block mb-4">
|
|
<span className="text-sm font-medium text-slate-700">{label}</span>
|
|
<input {...props}
|
|
className="mt-1 w-full px-3 py-2.5 rounded-lg border border-slate-200 text-sm
|
|
focus:outline-none focus:ring-2 focus:ring-brand-500/30" />
|
|
</label>
|
|
);
|
|
}
|