[V0_FILE]typescriptreact:file="components/kokonutui/auth-basic.tsx" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import Image from "next/image" import { AuthForm } from "./auth-form" import { SocialLogin } from "./social-login" export default function AuthBasic() { return (

Welcome back Enter your credentials to access your account

) } [V0_FILE]typescriptreact:file="components/kokonutui/auth-form.tsx" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Loader2, LockIcon } from "lucide-react" export function AuthForm() { const [isLoading, setIsLoading] = useState(false) async function handleSubmit(e: React.FormEvent) { e.preventDefault() setIsLoading(true) const formData = new FormData(e.target as HTMLFormElement) const email = formData.get("email") as string const password = formData.get("password") as string try { /** * To update with your actual authentication logic */ await new Promise((resolve) => setTimeout(resolve, 2000)) console.log("Signing in with:", email, password) } catch (error) { console.error("Authentication error:", error) } finally { setIsLoading(false) } } return ( ) } [V0_FILE]typescriptreact:file="components/kokonutui/social-login.tsx" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Separator } from "@/components/ui/separator" import { Loader2 } from "lucide-react" export function SocialLogin() { const [isGoogleLoading, setIsGoogleLoading] = useState(false) async function handleGoogleSignIn() { setIsGoogleLoading(true) try { /** * To update with your actual authentication logic */ await new Promise((resolve) => setTimeout(resolve, 1500)) console.log("Signing in with Google") } catch (error) { console.error("Google sign-in error:", error) } finally { setIsGoogleLoading(false) } } function GoogleIcon() { return ( ) } return ( <>

Or continue with

) }

About

About