[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" isEdit="true" isQuickEdit="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 } = { // 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", // Outlook variations "outlook.co": "outlook.com", "outlook.c": "outlook.com", // Apple variations "apple.co": "apple.com", "apple.c": "apple.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" isQuickEdit="true" isMerged="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" isQuickEdit="true" isMerged="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{" "} ?

)}

) } [V0_FILE]typescriptreact:file="app/layout.tsx" isFixed="true" isQuickEdit="true" isMerged="true" import "./globals.css" import type { Metadata } from "next" import type React from "react" // Import React export const metadata: Metadata = { title: "Email Input Widget", description: "A smooth email input component with validation and suggestions", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]typescriptreact:file="app/globals.css" isEdit="true" isQuickEdit="true" @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"); @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 100%; --foreground: 222.2 84% 4.9%; --card: 0 0% 100%; --card-foreground: 222.2 84% 4.9%; --popover: 0 0% 100%; --popover-foreground: 222.2 84% 4.9%; --primary: 221.2 83.2% 53.3%; --primary-foreground: 210 40% 98%; --secondary: 210 40% 96.1%; --secondary-foreground: 222.2 47.4% 11.2%; --muted: 210 40% 96.1%; --muted-foreground: 215.4 16.3% 46.9%; --accent: 210 40% 96.1%; --accent-foreground: 222.2 47.4% 11.2%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 210 40% 98%; --border: 214.3 31.8% 91.4%; --input: 214.3 31.8% 91.4%; --ring: 221.2 83.2% 53.3%; --radius: 0.5rem; } .dark { --background: 222.2 84% 4.9%; --foreground: 210 40% 98%; --card: 222.2 84% 4.9%; --card-foreground: 210 40% 98%; --popover: 222.2 84% 4.9%; --popover-foreground: 210 40% 98%; --primary: 217.2 91.2% 59.8%; --primary-foreground: 222.2 47.4% 11.2%; --secondary: 217.2 32.6% 17.5%; --secondary-foreground: 210 40% 98%; --muted: 217.2 32.6% 17.5%; --muted-foreground: 215 20.2% 65.1%; --accent: 217.2 32.6% 17.5%; --accent-foreground: 210 40% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 210 40% 98%; --border: 217.2 32.6% 17.5%; --input: 217.2 32.6% 17.5%; --ring: 224.3 76.3% 48%; } html { font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif; } * { @apply border-border; } body { @apply bg-background text-foreground; } } @layer utilities { .font-inter { font-family: "Inter", sans-serif; } } /* Custom styles for email input component */ .email-input-wrapper { @apply relative w-full; } .email-suggestion { @apply absolute z-10 w-full mt-1 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md shadow-lg max-h-60 overflow-auto; } .suggestion-item { @apply px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer; } .error-message { @apply mt-1 text-sm text-red-500 dark:text-red-400; } .suggestion-message { @apply mt-1 text-sm text-blue-500 dark:text-blue-400; } #email-input { font-size: 16px; line-height: 40px; margin-bottom: 4px; }

About

Tags

Share

More from jefffis

More Templates Like This

About

Tags

Share

About

Tags

Share

More from jefffis

More Templates Like This