'use client'; import { Card, CardContent, CardFooter, CardHeader, FormField, FormLabel, Button, Badge, Input } from '@components/ui'; import { useState } from 'react'; const GoogleIcon = () => ( ); const GithubIcon = () => ( ); const CheckIcon = () => ( ); export default function AuthFormSocialExample() { const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); const [loading, setLoading] = useState(false); const [success, setSuccess] = useState(false); const [socialLoading, setSocialLoading] = useState(null); const busy = loading || socialLoading !== null; const handleSocial = (provider) => { setSocialLoading(provider); setTimeout(() => { setSocialLoading(null); setSuccess(true); }, 900); }; const handleSubmit = () => { setLoading(true); setTimeout(() => { setLoading(false); setSuccess(true); }, 800); }; const reset = () => { setSuccess(false); setEmail(''); setPassword(''); }; return ( {success ? (

You're in

Verified

) : ( <>

Sign in

Choose a provider or use your email.

)} {success ? (

Welcome back, {email || 'friend'}.

) : (

Email setEmail(e.target.value)} /> Password setPassword(e.target.value)} />

)} Don't have an account? ); }

Social login

Installation

Demo

Sign in