Social Sign In

1'use client';
2import React, { useState } from 'react';
3import { Mail, Lock, Eye, EyeOff } from 'lucide-react';
4import { FaGoogle, FaGithub, FaXTwitter } from 'react-icons/fa6';
5
6export default function SocialSignIn() {
7  const [showPass, setShowPass] = useState(false);
8  const [mode, setMode] = useState<'social' | 'email'>('social');
9  return (
10    <div className="w-full max-w-sm rounded-2xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 p-7 shadow-lg">
11      <div className="mb-6 text-center">
12        <h2 className="text-xl font-bold text-zinc-900 dark:text-zinc-100">Sign in</h2>
13        <p className="mt-1 text-xs text-zinc-500">Choose how you&apos;d like to continue</p>
14      </div>
15      {mode === 'social' ? (
16        <div className="space-y-3">
17          <button className="flex w-full items-center gap-3 rounded-xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-800 px-4 py-3 text-sm font-semibold text-zinc-800 dark:text-zinc-200 hover:bg-zinc-50 dark:hover:bg-zinc-700 transition shadow-sm">
18            <FaGoogle className="h-4 w-4 text-rose-500 shrink-0" /> Continue with Google
19          </button>
20          <button className="flex w-full items-center gap-3 rounded-xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-800 px-4 py-3 text-sm font-semibold text-zinc-800 dark:text-zinc-200 hover:bg-zinc-50 dark:hover:bg-zinc-700 transition shadow-sm">
21            <FaGithub className="h-4 w-4 shrink-0" /> Continue with GitHub
22          </button>
23          <button className="flex w-full items-center gap-3 rounded-xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-800 px-4 py-3 text-sm font-semibold text-zinc-800 dark:text-zinc-200 hover:bg-zinc-50 dark:hover:bg-zinc-700 transition shadow-sm">
24            <FaXTwitter className="h-4 w-4 shrink-0" /> Continue with X
25          </button>
26          <div className="relative pt-2">
27            <div className="absolute inset-0 flex items-center"><div className="w-full border-t border-zinc-200 dark:border-zinc-800" /></div>
28            <span className="relative mx-auto block w-fit bg-white dark:bg-zinc-900 px-3 text-[10px] uppercase tracking-wider text-zinc-400">or email</span>
29          </div>
30          <button onClick={() => setMode('email')} className="w-full rounded-xl border border-zinc-200 dark:border-zinc-800 py-2.5 text-sm font-semibold text-zinc-700 dark:text-zinc-300 hover:bg-zinc-50 dark:hover:bg-zinc-800 transition">
31            Use email & password
32          </button>
33        </div>
34      ) : (
35        <form onSubmit={(e) => e.preventDefault()} className="space-y-4">
36          <button type="button" onClick={() => setMode('social')} className="mb-2 text-xs text-blue-600 dark:text-blue-400 hover:underline">← Back to all options</button>
37          <div>
38            <label className="block text-xs font-semibold text-zinc-700 dark:text-zinc-300 mb-1.5">Email</label>
39            <div className="relative">
40              <Mail className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-zinc-400" />
41              <input type="email" required placeholder="you@example.com" className="w-full rounded-lg border border-zinc-200 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-800 py-2.5 pl-9 pr-3 text-sm text-zinc-900 dark:text-zinc-100 placeholder:text-zinc-400 outline-none focus:border-blue-500 transition" />
42            </div>
43          </div>
44          <div>
45            <label className="block text-xs font-semibold text-zinc-700 dark:text-zinc-300 mb-1.5">Password</label>
46            <div className="relative">
47              <Lock className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-zinc-400" />
48              <input type={showPass ? 'text' : 'password'} required placeholder="••••••••" className="w-full rounded-lg border border-zinc-200 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-800 py-2.5 pl-9 pr-10 text-sm text-zinc-900 dark:text-zinc-100 placeholder:text-zinc-400 outline-none focus:border-blue-500 transition" />
49              <button type="button" onClick={() => setShowPass(!showPass)} className="absolute right-3 top-1/2 -translate-y-1/2 text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-200">
50                {showPass ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
51              </button>
52            </div>
53          </div>
54          <button type="submit" className="w-full rounded-lg bg-blue-600 hover:bg-blue-700 py-2.5 text-sm font-semibold text-white transition">Sign In</button>
55        </form>
56      )}
57    </div>
58  );
59}