Newsletter capture
A compact email capture that validates, submits, and confirms without losing the field.
Implementation
1"use client";2 3import {4 useId,5 useRef,6 useState,7 type FormEvent,8 type HTMLAttributes,9} from "react";10import { ArrowRight, Check } from "lucide-react";11 12export type NewsletterResult = void | { ok?: boolean; message?: string };13 14export type NewsletterCaptureProps = Omit<15 HTMLAttributes<HTMLDivElement>,16 "children" | "onSubmit" | "title"17> & {18 title?: string;19 description?: string;20 /** Visible label for the email field. */21 fieldLabel?: string;22 placeholder?: string;23 submitLabel?: string;24 /** Receives the validated address. Throw or return `{ ok: false }` to show a recovery message. */25 onSubmit?: (email: string) => NewsletterResult | Promise<NewsletterResult>;26 successTitle?: string;27 successMessage?: string;28 privacyNote?: string;