Footer — Contact Details

1import type * as React from 'react'
2 
3import { Footer, FooterNav, FooterNavColumn, FooterNavLink } from '@/components/footer'
4import { IconCall } from '@/icons/call'
5import { IconLocationOn } from '@/icons/location-on'
6import { IconMail } from '@/icons/mail'
7 
8// ── Sample content — replace with your service's own ────────────────────────
9const contactSample = {
10  phone: { label: '13 77 88', href: 'tel:+61137788' },
11  email: { label: 'info@service.nsw.gov.au', href: 'mailto:info@service.nsw.gov.au' },
12  address: ['McKell Building, 2-24 Rawson Place', 'Sydney NSW 2000'],
13  hours: 'Monday to Friday, 7am – 7pm',
14}
15 
16const columnsSample = [
17  {
18    heading: 'Services',
19    links: [
20      { name: 'Apply for a licence', href: '#licence' },
21      { name: 'Pay a fine', href: '#fine' },
22      { name: 'Book an appointment', href: '#appointment' },
23    ],
24  },
25  {
26    heading: 'Help',
27    links: [
28      { name: 'Accessibility help', href: '#accessibility-help' },
29      { name: 'Give feedback', href: '#feedback' },
30      { name: 'Report a problem', href: '#report' },
31    ],
32  },
33]
34 
35const legalLinksSample = [
36  { name: 'Accessibility', href: '#accessibility' },
37  { name: 'Privacy', href: '#privacy' },
38  { name: 'Copyright', href: '#copyright' },
39]
40 
41const departmentSample = 'Digital NSW, Department of Customer Service'
42 
43type FooterContactProps = Omit<React.ComponentProps<typeof Footer>, 'children'> & {
44  columns?: typeof columnsSample
45  contact?: typeof contactSample
46}
47 
48/**
49 * Contact details beside the site map — phone, email, street address and
50 * opening hours. The right choice for a service people need to reach a human
51 * about, where burying "Contact us" in a link column would be a disservice.
52 *
53 * The details sit in an `<address>` element, which is the correct semantic for
54 * contact information about the enclosing document. Phone and email are real
55 * `tel:` / `mailto:` links so they are actionable on a phone.
56 */
57export function FooterContact({
58  columns = columnsSample,
59  contact = contactSample,
60  legalLinks = legalLinksSample,
61  department = departmentSample,
62  ...props
63}: FooterContactProps) {
64  return (
65    <Footer legalLinks={legalLinks} department={department} {...props}>
66      <div className='grid py-4 max-lg:gap-8 lg:grid-cols-[minmax(0,22rem)_1fr] lg:gap-16'>
67        <div className='flex flex-col gap-3'>
68          <h2 className='text-sm font-bold text-(--footer-ink)'>Contact us</h2>
69// … truncated