50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T30fd,'use client'; import { useState } from 'react'; import { zodResolver } from '@hookform/resolvers/zod'; import { useForm } from 'react-hook-form'; import { z } from 'zod'; import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'; import { Button } from '@/components/ui/button'; import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage, } from '@/components/ui/form'; import { Input } from '@/components/ui/input'; import { cn } from '@/lib/utils'; import { IconArrowRight, IconCheck, FooterBar, type FooterSocial } from './footer-kit'; const KEYFRAMES = ` @keyframes su-news-success { from { opacity: 0; transform: scale(0.96) } to { opacity: 1; transform: none } } @keyframes su-news-shake { 0%, 100% { transform: translateX(0) } 20% { transform: translateX(-4px) } 40% { transform: translateX(4px) } 60% { transform: translateX(-2px) } 80% { transform: translateX(2px) } } `; export type NewsletterFooterVariant = 'Panel' | 'Inline'; export interface NewsletterFooterProps { links?: { label: string; href: string }[]; brand: string; headline?: string; blurb?: string; cadence?: string; /** Three lines of "what actually lands in your inbox". Carries the panel. */ perks?: string[]; /** Reader avatars beside the count. Photos, not initials. */ readers?: { src: string; initials: string }[]; groups?: { title: string; links: { label: string; href: string }[] }[]; socials?: FooterSocial[]; onSubscribe?: (email: string) => void; copyright?: string; variant?: NewsletterFooterVariant; className?: string; } /** * react-hook-form + zod through the shadcn `Form`, rather than a `useState` * string and a regex. * * It is the same three fields of markup either way, but the resolver owns * validation, `FormMessage` owns the error text and its `aria-describedby` * wiring, and the field stops being invalid the moment it becomes valid * instead of on the next keystroke. */ const subscribeSchema = z.object({ email: z .string() .min(1, 'Enter your email address.') .email('That does not look like an email address.'), }); type SubscribeValues = z.infer; const DEFAULT_PERKS = [ 'New blocks the week they ship', 'Breaking changes before you hit them', "The occasional teardown of somebody else's UI", ]; export function NewsletterFooter({ links, brand, headline = 'One short email when something worth reading ships.', blurb = 'Product notes, teardown posts, and the occasional postmortem. No drip sequence.', cadence = 'Roughly monthly · 2,400 readers', perks = DEFAULT_PERKS, readers = [], groups = [], socials, onSubscribe, copyright, variant = 'Panel', className, }: NewsletterFooterProps) { const [done, setDone] = useState(null); const form = useForm({ resolver: zodResolver(subscribeSchema), defaultValues: { email: '' }, mode: 'onSubmit', reValidateMode: 'onChange', }); const invalid = Boolean(form.formState.errors.email); function submit(values: SubscribeValues) { setDone(values.email.trim()); onSubscribe?.(values.email.trim()); } const panel = variant === 'Panel'; return (