Centered Footer with Social Icons

import {
  DiscordLogoIcon,
  MastodonLogoIcon,
  ThreadsLogoIcon,
} from "@phosphor-icons/react/dist/ssr"

import {
  Footer,
  FooterBand,
  FooterFineprint,
  FooterLink,
  FooterLinkRow,
  FooterSocial,
  FooterSocialLink,
} from "@/components/footer/footer"

// The copy: change text here, not in the markup.
const COPY = {
  label: "Footer",
  fineprint: "© 2026 Orbcore, Inc.",
} as const

const LINKS = [
  { label: "About", href: "#" },
  { label: "Blog", href: "#" },
  { label: "Pricing", href: "#" },
  { label: "Docs", href: "#" },
  { label: "Contact", href: "#" },
] as const

const SOCIAL = [
  { name: "Threads", href: "https://threads.net", icon: ThreadsLogoIcon },
  { name: "Mastodon", href: "https://mastodon.social", icon: MastodonLogoIcon },
  { name: "Discord", href: "https://discord.com", icon: DiscordLogoIcon },
] as const

export default function CenteredFooter01() {
  return (
    <Footer>
      <FooterBand className="text-center">
        <nav aria-label={COPY.label}>
          <FooterLinkRow>
            {LINKS.map((link) => (
              <li key={link.label}>
                <FooterLink href={link.href}>{link.label}</FooterLink>
              </li>
            ))}
          </FooterLinkRow>
        </nav>
        <FooterSocial aria-label="Social" className="justify-center">
          {SOCIAL.map(({ name, href, icon: Icon }) => (
            <FooterSocialLink key={name} href={href} aria-label={name}>
              <Icon weight="fill" aria-hidden="true" />
            </FooterSocialLink>
          ))}
        </FooterSocial>
        <FooterFineprint>{COPY.fineprint}</FooterFineprint>
      </FooterBand>
    </Footer>
  )
}

pnpm dlx shadcn add @01orbital/centered-footer-01

npx shadcn add @01orbital/centered-footer-01

yarn shadcn add @01orbital/centered-footer-01

bunx --bun shadcn add @01orbital/centered-footer-01