"use client"; import React, { useState, useEffect } from "react"; import { motion, AnimatePresence } from "framer-motion"; import { Github, Mail, Chrome, Apple, CheckCircle2, AlertCircle, Loader2 } from "lucide-react"; export default function SocialOAuthStack() { const [email, setEmail] = useState(""); const [emailError, setEmailError] = useState(false); const [status, setStatus] = useState<"idle" | "loading" | "success">("idle"); const [activeProvider, setActiveProvider] = useState(null); // Email validation logic const validateEmail = (val: string) => { const pattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; return pattern.test(val); }; useEffect(() => { if (email.length > 0) { setEmailError(!validateEmail(email)); } else { setEmailError(false); } }, [email]); const handleAction = async (provider: string) => { setActiveProvider(provider); setStatus("loading"); // Simulate API Request await new Promise((resolve) => setTimeout(resolve, 2000)); setStatus("success"); setTimeout(() => { setStatus("idle"); setActiveProvider(null); }, 2500); }; return (

{status === "success" ? (

Check your inbox

We've sent a magic link to
{email || "your account"}

) : (

Access Portal

Professional grade authentication

{/* Google Button */} {/* GitHub Button */}

Secure Email Login

{email.length > 0 ? ( emailError ? : ) : ( )}

setEmail(e.target.value)} placeholder="work-email@company.com" className={`w-full pl-11 pr-4 py-3.5 bg-neutral-50 dark:bg-neutral-900/50 border rounded-2xl text-sm outline-none transition-all dark:text-white ${ email.length > 0 && emailError ? "border-red-500/50 ring-4 ring-red-500/5" : "border-neutral-200 dark:border-neutral-800 focus:border-neutral-900 dark:focus:border-white" }`} />

)}

Enterprise encryption enabled
Security Policy

); }