Card Sign In

1'use client';
2import React, { useState } from 'react';
3import { Mail, Lock, Eye, EyeOff, ArrowRight } from 'lucide-react';
4import { FaGoogle, FaGithub } from 'react-icons/fa6';
5
6export default function CardSignIn() {
7  const [showPass, setShowPass] = useState(false);
8  const [loading, setLoading] = useState(false);
9  const submit = (e: React.FormEvent) => {
10    e.preventDefault();
11    setLoading(true);
12    setTimeout(() => setLoading(false), 1500);
13  };
14  return (
15    <div className="w-full max-w-sm rounded-2xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 p-8 shadow-lg">
16      <div className="mb-6 text-center">
17        <div className="mx-auto mb-3 flex h-12 w-12 items-center justify-center rounded-xl bg-blue-600 text-white font-bold text-lg">A</div>
18        <h2 className="text-xl font-bold text-zinc-900 dark:text-zinc-100">Welcome back</h2>
19        <p className="mt-1 text-xs text-zinc-500">Sign in to your account to continue</p>
20      </div>
21      <div className="grid grid-cols-2 gap-2 mb-5">
22        <button className="flex items-center justify-center gap-2 rounded-lg border border-zinc-200 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-800 py-2.5 text-xs font-semibold text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-700 transition">
23          <FaGoogle className="h-3.5 w-3.5 text-rose-500" /> Google
24        </button>
25        <button className="flex items-center justify-center gap-2 rounded-lg border border-zinc-200 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-800 py-2.5 text-xs font-semibold text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-700 transition">
26          <FaGithub className="h-3.5 w-3.5" /> GitHub
27        </button>
28      </div>
29      <div className="relative mb-5">
30        <div className="absolute inset-0 flex items-center"><div className="w-full border-t border-zinc-200 dark:border-zinc-800" /></div>
31        <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</span>
32      </div>
33      <form onSubmit={submit} className="space-y-4">
34        <div>
35          <label className="block text-xs font-semibold text-zinc-700 dark:text-zinc-300 mb-1.5">Email</label>
36          <div className="relative">
37            <Mail className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-zinc-400" />
38            <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 focus:ring-2 focus:ring-blue-500/20 transition" />
39          </div>
40        </div>
41        <div>
42          <div className="flex items-center justify-between mb-1.5">
43            <label className="text-xs font-semibold text-zinc-700 dark:text-zinc-300">Password</label>
44            <a href="#" className="text-xs text-blue-600 dark:text-blue-400 hover:underline">Forgot?</a>
45          </div>
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 focus:ring-2 focus:ring-blue-500/20 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" disabled={loading} className="flex w-full items-center justify-center gap-2 rounded-lg bg-blue-600 hover:bg-blue-700 py-2.5 text-sm font-semibold text-white transition disabled:opacity-60">
55          {loading ? 'Signing in...' : <><span>Sign In</span><ArrowRight className="h-4 w-4" /></>}
56        </button>
57      </form>
58      <p className="mt-5 text-center text-xs text-zinc-500">No account? <a href="#" className="text-blue-600 dark:text-blue-400 font-semibold hover:underline">Sign up free</a></p>
59    </div>
60  );
61}