"use client"; import React, { useState } from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Button } from "@/components/ui/button" import { Label } from "@/components/ui/label" import { validateEmail } from "@/lib/utils" import { AlertCircle } from "lucide-react" interface ChangePasswordProps { gitEmail: string; } export function ChangeEmail({ gitEmail }: ChangePasswordProps) { const [newEmail, setNewEmail] = useState("") const [loading, setLoading] = useState(false); const [message, setMessage] = useState(null); const [emailError, setEmailError] = useState(null); const handleEmailChange = (e: React.ChangeEvent) => { const value = e.target.value; setNewEmail(value); // Validate email const [username, domain] = value.split('@'); if (username && domain) { const validation = validateEmail(username, domain); if (!validation.valid) { setEmailError(validation.message); } else { setEmailError(null); } } else if (value) { setEmailError("Invalid email format"); } else { setEmailError(null); } }; const handleSubmit = async (e: React.FormEvent) => { e.preventDefault(); if (emailError) { return; } setLoading(true); setMessage(null); await new Promise((resolve) => setTimeout(resolve, 5000)); setMessage("Email updated successfully."); setLoading(false); }; return ( Change Email
{emailError && (

{emailError}

)}
{message &&

{message}

}
) } export default ChangeEmail;