{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "footer-contact",
  "title": "Footer — Contact Details",
  "description": "Phone, email, street address and opening hours in an <address> element, beside the site map.",
  "registryDependencies": [
    "https://ui.digital.nsw.gov.au/registry/r/theme.json",
    "https://ui.digital.nsw.gov.au/registry/r/footer.json",
    "https://ui.digital.nsw.gov.au/registry/r/icons.json"
  ],
  "files": [
    {
      "path": "src/patterns/footer-contact.tsx",
      "content": "import type * as React from 'react'\n\nimport { Footer, FooterNav, FooterNavColumn, FooterNavLink } from '@/components/footer'\nimport { IconCall } from '@/icons/call'\nimport { IconLocationOn } from '@/icons/location-on'\nimport { IconMail } from '@/icons/mail'\n\n// ── Sample content — replace with your service's own ────────────────────────\nconst contactSample = {\n  phone: { label: '13 77 88', href: 'tel:+61137788' },\n  email: { label: 'info@service.nsw.gov.au', href: 'mailto:info@service.nsw.gov.au' },\n  address: ['McKell Building, 2-24 Rawson Place', 'Sydney NSW 2000'],\n  hours: 'Monday to Friday, 7am – 7pm',\n}\n\nconst columnsSample = [\n  {\n    heading: 'Services',\n    links: [\n      { name: 'Apply for a licence', href: '#licence' },\n      { name: 'Pay a fine', href: '#fine' },\n      { name: 'Book an appointment', href: '#appointment' },\n    ],\n  },\n  {\n    heading: 'Help',\n    links: [\n      { name: 'Accessibility help', href: '#accessibility-help' },\n      { name: 'Give feedback', href: '#feedback' },\n      { name: 'Report a problem', href: '#report' },\n    ],\n  },\n]\n\nconst legalLinksSample = [\n  { name: 'Accessibility', href: '#accessibility' },\n  { name: 'Privacy', href: '#privacy' },\n  { name: 'Copyright', href: '#copyright' },\n]\n\nconst departmentSample = 'Digital NSW, Department of Customer Service'\n\ntype FooterContactProps = Omit<React.ComponentProps<typeof Footer>, 'children'> & {\n  columns?: typeof columnsSample\n  contact?: typeof contactSample\n}\n\n/**\n * Contact details beside the site map — phone, email, street address and\n * opening hours. The right choice for a service people need to reach a human\n * about, where burying \"Contact us\" in a link column would be a disservice.\n *\n * The details sit in an `<address>` element, which is the correct semantic for\n * contact information about the enclosing document. Phone and email are real\n * `tel:` / `mailto:` links so they are actionable on a phone.\n */\nexport function FooterContact({\n  columns = columnsSample,\n  contact = contactSample,\n  legalLinks = legalLinksSample,\n  department = departmentSample,\n  ...props\n}: FooterContactProps) {\n  return (\n    <Footer legalLinks={legalLinks} department={department} {...props}>\n      <div className='grid py-4 max-lg:gap-8 lg:grid-cols-[minmax(0,22rem)_1fr] lg:gap-16'>\n        <div className='flex flex-col gap-3'>\n          <h2 className='text-sm font-bold text-(--footer-ink)'>Contact us</h2>\n          {/* not-italic: browsers italicise <address> by default. */}\n          <address className='flex flex-col gap-3 text-sm text-(--footer-ink) not-italic'>\n            <span className='flex items-start gap-2'>\n              <IconCall className='mt-0.5 size-4 shrink-0 fill-current' aria-hidden='true' />\n              <FooterNavLink href={contact.phone.href}>{contact.phone.label}</FooterNavLink>\n            </span>\n            <span className='flex items-start gap-2'>\n              <IconMail className='mt-0.5 size-4 shrink-0 fill-current' aria-hidden='true' />\n              <FooterNavLink href={contact.email.href}>{contact.email.label}</FooterNavLink>\n            </span>\n            <span className='flex items-start gap-2'>\n              <IconLocationOn className='mt-0.5 size-4 shrink-0 fill-current' aria-hidden='true' />\n              <span className='flex flex-col'>\n                {contact.address.map((line) => (\n                  <span key={line}>{line}</span>\n                ))}\n              </span>\n            </span>\n          </address>\n          <p className='text-sm text-(--footer-ink)'>{contact.hours}</p>\n        </div>\n        <FooterNav className='py-0 lg:grid-cols-2'>\n          {columns.map((column) => (\n            <FooterNavColumn key={column.heading} heading={column.heading} links={column.links} />\n          ))}\n        </FooterNav>\n      </div>\n    </Footer>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/footer-contact.tsx"
    }
  ],
  "type": "registry:block",
  "meta": {
    "nswdsVersion": "5.1.0"
  }
}