[V0_FILE]typescript:file="utils/emailUtils.ts" isEdit="true" 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 } = { "gamil.com": "gmail.com", "gmal.com": "gmail.com", "gnail.com": "gmail.com", "yahooo.com": "yahoo.com", "yaho.com": "yahoo.com", "outloo.com": "outlook.com", "outlok.com": "outlook.com", "hotmal.com": "hotmail.com", "hotnail.com": "hotmail.com", } return corrections[domain] || null } [V0_FILE]typescript:file="hooks/useEmailInput.ts" isFixed="true" isEdit="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" isEdit="true" 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="app/page.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { EmailInput } from "../components/EmailInput" export default function Home() { const [darkMode, setDarkMode] = useState(false) const [customDomains, setCustomDomains] = useState([]) const [newDomain, setNewDomain] = useState("") const toggleDarkMode = () => setDarkMode(!darkMode) const addCustomDomain = (e: React.FormEvent) => { e.preventDefault() if (newDomain && !customDomains.includes(newDomain)) { setCustomDomains([...customDomains, newDomain]) setNewDomain("") } } return (

Email Input Widget

Dark Mode

{customDomains.length > 0 && (

Custom Domains:

{domain}

)}

) } [V0_FILE]typescriptreact:file="components/EmailInput.tsx" isEdit="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 (

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

{errorMessage}

} {suggestedDomain && !errorMessage && (

Did you mean{" "} ?

)}

) }

About

Tags

Share

More from jefffis

More Templates Like This

About

Tags

Share

About

Tags

Share

More from jefffis

More Templates Like This