34 lines
1.4 KiB
TypeScript
34 lines
1.4 KiB
TypeScript
// The [[...sign-in]] folder name is MAGIC!
|
|
// It catches all Clerk's internal sign-in routes
|
|
// (sign-in, sign-in/factor-one, sign-in/sso-callback, etc.)
|
|
|
|
import { SignIn } from "@clerk/nextjs";
|
|
|
|
export default function SignInPage() {
|
|
return (
|
|
<main className="min-h-screen flex items-center justify-center bg-slate-50 dark:bg-slate-900">
|
|
{/* Left side - branding (optional, add later) */}
|
|
<div className="w-full max-w-md">
|
|
<SignIn
|
|
appearance={{
|
|
elements: {
|
|
// Customize Clerk's UI to match your design
|
|
rootBox: "w-full",
|
|
card: "bg-white dark:bg-slate-800 shadow-xl border border-slate-200 dark:border-slate-700 rounded-2xl",
|
|
headerTitle: "text-slate-900 dark:text-slate-100 font-bold",
|
|
headerSubtitle: "text-slate-600 dark:text-slate-400",
|
|
socialButtonsBlockButton:
|
|
"border border-slate-300 dark:border-slate-600 hover:bg-slate-50 dark:hover:bg-slate-700",
|
|
formFieldInput:
|
|
"border-slate-300 dark:border-slate-600 dark:bg-slate-700 dark:text-slate-100 focus:ring-blue-500",
|
|
formButtonPrimary:
|
|
"bg-blue-700 hover:bg-blue-800 text-white font-semibold",
|
|
footerActionLink: "text-blue-700 hover:text-blue-800 font-medium",
|
|
},
|
|
}}
|
|
/>
|
|
</div>
|
|
</main>
|
|
);
|
|
}
|