Auth Divider

import { AuthDivider } from "@/components/ui/auth-divider";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";

export default function Default() {
  return (
    <div className="flex min-h-[420px] w-full items-center justify-center bg-background p-6">
      <div className="w-full max-w-sm space-y-6 rounded-xl border bg-card p-6 text-card-foreground shadow-sm">
        <div className="space-y-1 text-center">
          <h2 className="font-semibold text-xl tracking-tight">Welcome back</h2>
          <p className="text-muted-foreground text-sm">
            Sign in to continue to your account
          </p>
        </div>

        <div className="space-y-3">
          <Button variant="outline" className="w-full">
            Continue with Google
          </Button>
          <Button variant="outline" className="w-full">
            Continue with GitHub
          </Button>
        </div>

        <AuthDivider>OR CONTINUE WITH EMAIL</AuthDivider>

        <div className="space-y-3">
          <Input type="email" placeholder="name@example.com" />
          <Input type="password" placeholder="Password" />
          <Button className="w-full">Sign in</Button>
        </div>
      </div>
    </div>
  );
}