[V0_FILE]typescript:file="hooks/useEmailInput.ts" isFixed="true" isQuickEdit="true" isMerged="true" import { useState, useCallback, useMemo } from "react" import { validateEmail, suggestDomain, popularDomains } from "../utils/emailUtils" export const useEmailInput = (customDomains: string[] = []) => { const [email, setEmail] = useState("") const [isTouched, setIsTouched] = useState(false) const isValid = useMemo(() => validateEmail(email), [email]) const errorMessage = useMemo( () => (isTouched && !isValid && email !== "" ? "Please enter a valid email address" : ""), [isTouched, isValid, email], ) const suggestedDomain = useMemo(() => suggestDomain(email), [email]) const domainSuggestions = useMemo(() => { const allDomains = [...new Set([...popularDomains, ...customDomains])] const [, inputDomain] = email.split("@") return inputDomain !== undefined ? allDomains.filter((domain) => domain.toLowerCase().startsWith(inputDomain.toLowerCase())) : [] }, [email, customDomains]) const handleInputChange = useCallback((e: React.ChangeEvent) => { setEmail(e.target.value) }, []) const handleInputBlur = useCallback(() => { setIsTouched(true) }, []) const handleDomainSelect = useCallback( (domain: string) => { const [localPart] = email.split("@") setEmail(`${localPart}@${domain}`) setIsTouched(true) }, [email], ) const handleDomainCorrection = useCallback(() => { if (suggestedDomain) { const [localPart] = email.split("@") setEmail(`${localPart}@${suggestedDomain}`) } }, [email, suggestedDomain]) return { email, isValid, errorMessage, suggestedDomain, domainSuggestions, handleInputChange, handleInputBlur, handleDomainSelect, handleDomainCorrection, } } [V0_FILE]typescriptreact:file="components/DomainSuggestions.tsx" isMerged="true" import type React from "react" interface DomainSuggestionsProps { suggestions: string[] onSelect: (domain: string) => void } export const DomainSuggestions: React.FC = ({ suggestions, onSelect }) => { if (suggestions.length === 0) return null return (

{ e.preventDefault() // Prevent blur event from firing before click onSelect(domain) }} > {domain}

) } [V0_FILE]typescriptreact:file="utils/emailUtils.ts" isMerged="true" export const validateEmail = (email: string): boolean => { const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/ return emailRegex.test(email) } export const popularDomains = ["gmail.com", "yahoo.com", "outlook.com", "hotmail.com", "apple.com"] export const suggestDomain = (email: string): string | null => { const [, domain] = email.split("@") if (!domain) return null const corrections: { [key: string]: string } = { // Gmail variations "gmail.c": "gmail.com", "gmail.co": "gmail.com", "gamil.com": "gmail.com", "gmal.com": "gmail.com", "gnail.com": "gmail.com", "gmial.com": "gmail.com", "gami.com": "gmail.com", "gaml.com": "gmail.com", "gmai.com": "gmail.com", "gmil.com": "gmail.com", // Yahoo variations "yahoo.c": "yahoo.com", "yahoo.co": "yahoo.com", "yaho.com": "yahoo.com", "yahooo.com": "yahoo.com", "yahho.com": "yahoo.com", "yaho.com": "yahoo.com", "yaoo.com": "yahoo.com", "yahoo.co": "yahoo.com", "yhoo.com": "yahoo.com", "yahu.com": "yahoo.com", // Hotmail variations "hotmail.c": "hotmail.com", "hotmail.co": "hotmail.com", "hotmal.com": "hotmail.com", "hotnail.com": "hotmail.com", "hotmial.com": "hotmail.com", "hotmal.com": "hotmail.com", "hotmai.com": "hotmail.com", "hotmil.com": "hotmail.com", "hotmal.co": "hotmail.com", "hotmail.co": "hotmail.com", // Additional variations without TLD gami: "gmail.com", gaml: "gmail.com", gmal: "gmail.com", gmil: "gmail.com", yaho: "yahoo.com", yaoo: "yahoo.com", yhoo: "yahoo.com", hotmal: "hotmail.com", hotmai: "hotmail.com", hotmil: "hotmail.com", } // Check for exact match first if (corrections[domain]) { return corrections[domain] } // If no exact match, check for partial match (domain without TLD) const domainWithoutTLD = domain.split(".")[0] if (corrections[domainWithoutTLD]) { return corrections[domainWithoutTLD] } return null } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" "use client" import { useEffect, useState } from "react" import { EmailInput } from "../components/EmailInput" export default function Home() { const [darkMode, setDarkMode] = useState(false) const [customDomains, setCustomDomains] = useState([]) useEffect(() => { // Check system preference for dark mode const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)") setDarkMode(mediaQuery.matches) // Listen for changes in system preference const handler = (e: MediaQueryListEvent) => setDarkMode(e.matches) mediaQuery.addEventListener("change", handler) return () => mediaQuery.removeEventListener("change", handler) }, []) return (

Smoooth Email Validation

{/* Custom domain functionality is hidden but still available */} {/* */} {customDomains.length > 0 && (

Custom Domains:

{domain}

)}

) } [V0_FILE]typescriptreact:file="components/EmailInput.tsx" isEdit="true" isQuickEdit="true" import type React from "react" import { useState, useEffect, useRef } from "react" import { useEmailInput } from "../hooks/useEmailInput" import { DomainSuggestions } from "./DomainSuggestions" interface EmailInputProps { customDomains?: string[] darkMode?: boolean } export const EmailInput: React.FC = ({ customDomains = [], darkMode = false }) => { const { email, errorMessage, suggestedDomain, domainSuggestions, handleInputChange, handleInputBlur, handleDomainSelect, handleDomainCorrection, } = useEmailInput(customDomains) const [showSuggestions, setShowSuggestions] = useState(false) const inputRef = useRef(null) const [lastAtIndex, setLastAtIndex] = useState(-1) useEffect(() => { const atIndex = email.lastIndexOf("@") if (atIndex !== -1) { setLastAtIndex(atIndex) } const shouldShowSuggestions = email.includes("@") && (atIndex === email.length - 1 || !email.substring(atIndex + 1).includes(".")) setShowSuggestions(shouldShowSuggestions) }, [email]) const handleFocus = () => { // Only show suggestions if we're editing the domain part const atIndex = email.lastIndexOf("@") if (atIndex !== -1 && atIndex === email.length - 1) { setShowSuggestions(true) } } const handleBlur = () => { setTimeout(() => { setShowSuggestions(false) handleInputBlur() }, 200) } const handleSuggestionSelect = (domain: string) => { handleDomainSelect(domain) setShowSuggestions(false) inputRef.current?.blur() } const handleKeyDown = (e: React.KeyboardEvent) => { if (e.key === "Backspace" && email.length === lastAtIndex + 1) { // If we're deleting the '@' symbol, update lastAtIndex setLastAtIndex(-1) } } return (

Enter your email {showSuggestions && domainSuggestions.length > 0 && ( )} {errorMessage &&

{errorMessage}

} {suggestedDomain && !errorMessage && (

Did you mean{" "} ?

)}

) }

About

About