Footer — Compact Bar

1import type * as React from 'react'
2 
3import { Footer, FooterNavLink, FooterSmallPrint } from '@/components/footer'
4import { Logo } from '@/components/logo'
5 
6// ── Sample content — replace with your service's own ────────────────────────
7const legalLinksSample = [
8  { name: 'Accessibility', href: '#accessibility' },
9  { name: 'Privacy', href: '#privacy' },
10  { name: 'Copyright', href: '#copyright' },
11]
12 
13const departmentSample = 'Digital NSW'
14 
15type FooterCompactProps = Omit<
16  React.ComponentProps<typeof Footer>,
17  'acknowledgement' | 'children' | 'smallPrint'
18>
19 
20/**
21 * A single horizontal bar: logo, inline links, then ownership and social. The
22 * shortest footer in the set, for embedded tools, dashboards and admin screens
23 * where the footer should take almost no vertical space.
24 *
25 * NOTE — this is the one block that omits acknowledgement of Country: it
26 * cannot be shown respectfully in a one-line bar. A service using this footer
27 * must carry the acknowledgement elsewhere on the page. If there is nowhere
28 * else for it, use `FooterSimpleCentred` instead.
29 */
30export function FooterCompact({
31  legalLinks = legalLinksSample,
32  socialLinks,
33  department = departmentSample,
34  year,
35  ...props
36}: FooterCompactProps) {
37  return (
38    <Footer {...props} acknowledgement={false} smallPrint={false}>
39      <div className='flex items-center py-2 max-lg:flex-col max-lg:gap-4 lg:flex-row lg:gap-8'>
40        <Logo className='h-8 w-auto shrink-0' />
41        {/* Labelled because this nav sits alongside the site's other landmarks;
42            "Footer" distinguishes it in a screen reader's landmark list. */}
43        <nav
44          aria-label='Footer'
45          className='flex flex-wrap gap-x-4 gap-y-2 text-sm max-lg:justify-center lg:justify-start'
46        >
47          {legalLinks.map((item) => (
48            <FooterNavLink key={item.name} href={item.href}>
49              {item.name}
50            </FooterNavLink>
51          ))}
52        </nav>
53        <FooterSmallPrint
54          department={department}
55          socialLinks={socialLinks}
56          year={year}
57          // pt-0 removes the stacked-layout spacing: in this bar the row is the
58          // layout, not a section below one.
59          className='gap-4 pt-0 lg:ml-auto'
60        />
61      </div>
62    </Footer>
63  )
64}