Footer — Newsletter

1'use client'
2 
3import type * as React from 'react'
4 
5import { Button } from '@/components/button'
6import { Field, FieldDescription, FieldLabel } from '@/components/field'
7import { Footer, FooterNav, FooterNavColumn } from '@/components/footer'
8import { Input } from '@/components/input'
9import { IconMail } from '@/icons/mail'
10 
11// ── Sample content — replace with your service's own ────────────────────────
12const columnsSample = [
13  {
14    heading: 'Services',
15    links: [
16      { name: 'Apply for a licence', href: '#licence' },
17      { name: 'Pay a fine', href: '#fine' },
18      { name: 'Book an appointment', href: '#appointment' },
19    ],
20  },
21  {
22    heading: 'About',
23    links: [
24      { name: 'Who we are', href: '#about' },
25      { name: 'Our strategy', href: '#strategy' },
26      { name: 'Careers', href: '#careers' },
27    ],
28  },
29]
30 
31const legalLinksSample = [
32  { name: 'Accessibility', href: '#accessibility' },
33  { name: 'Privacy', href: '#privacy' },
34  { name: 'Copyright', href: '#copyright' },
35]
36 
37const departmentSample = 'Digital NSW, Department of Customer Service'
38 
39type FooterNewsletterProps = Omit<React.ComponentProps<typeof Footer>, 'children'> & {
40  columns?: typeof columnsSample
41  /** Called with the submitted email. Wire this to your subscription service. */
42  onSubscribe?: (email: string) => void
43}
44 
45/**
46 * Link columns beside an email subscription form. Use for services that
47 * publish updates people opt into — grant rounds, policy changes, alerts.
48 *
49 * The form is a worked example: it prevents the default submit and hands the
50 * address to `onSubscribe`. Replace that with your own submission, and note
51 * that collecting an email address makes this a collection point under the
52 * PPIP Act — your privacy collection notice belongs next to the field.
53 *
54 * The label is a real `FieldLabel` inside a `Field`, so Base UI associates it
55 * with the input and generates per-instance ids; two of these on one page will
56 * not collide. Do not swap it for a placeholder — placeholders disappear on
57 * input and are not an accessible name.
58 */
59export function FooterNewsletter({
60  columns = columnsSample,
61  legalLinks = legalLinksSample,
62  department = departmentSample,
63  onSubscribe,
64  ...props
65}: FooterNewsletterProps) {
66  function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
67    event.preventDefault()
68    const data = new FormData(event.currentTarget)
69    const email = data.get('email')
70// … truncated