@a4ui/core 0.37.0 → 0.38.0

package/src/ui/SiteFooter.tsx

@@ -0,0 +1,112 @@
+// SiteFooter — the bottom of a marketing site: brand and tagline, link columns,
+// social links and a copyright line.
+import type { JSX } from 'solid-js'
+import { For, Show } from 'solid-js'
+
+import { cn } from '../lib/cn'
+import type { SectionLink } from './internal/sectionKit'
+import { SOCIAL_LABEL, SocialIcon, type SocialNetwork } from './internal/socialIcons'
+
+export type { SocialNetwork }
+
+/** A titled group of links in a {@link SiteFooter}. */
+export interface FooterColumn {
+  title: string
+  links: SectionLink[]
+}
+
+/** A social profile link in a {@link SiteFooter}. */
+export interface SocialLink {
+  network: SocialNetwork
+  href: string
+}
+
+export interface SiteFooterProps {
+  brand: string
+  /** One line under the brand. */
+  tagline?: string
+  columns?: FooterColumn[]
+  social?: SocialLink[]
+  /** Copyright line. Defaults to `© <current year> <brand>`. */
+  copyright?: string
+  class?: string
+}
+
+/**
+ * Site footer: brand and tagline, columns of links, social network icons and a
+ * copyright line on a glass band. Columns wrap to two per row on phones.
+ *
+ * @example
+ * ```tsx
+ * <SiteFooter
+ *   brand="Northwind"
+ *   tagline="Websites for small businesses."
+ *   columns={[{ title: 'Company', links: [{ label: 'About', href: '/about' }] }]}
+ *   social={[{ network: 'instagram', href: 'https://instagram.com/northwind' }]}
+ * />
+ * ```
+ */
+export function SiteFooter(props: SiteFooterProps): JSX.Element {
+  const copyright = () => props.copyright ?? `© ${new Date().getFullYear()} ${props.brand}`
+  return (
+    <footer class={cn('bg-glass w-full border-t border-border/60 backdrop-blur-xl', props.class)}>
+      <div class="mx-auto flex w-full max-w-6xl flex-col gap-10 px-5 py-14">
+        <div class="flex flex-col gap-10 lg:flex-row lg:justify-between">
+          <div class="flex max-w-xs flex-col gap-3">
+            <p class="text-lg font-semibold tracking-tight text-foreground">{props.brand}</p>
+            <Show when={props.tagline}>
+              <p class="text-sm text-muted-foreground">{props.tagline}</p>
+            </Show>
+          </div>
+          <Show when={props.columns?.length}>
+            <div class="grid grid-cols-2 gap-8 sm:grid-cols-3 lg:gap-16">
+              <For each={props.columns}>
+                {(column) => (
+                  <nav aria-label={column.title} class="flex flex-col gap-3">
+                    <p class="text-sm font-semibold text-foreground">{column.title}</p>
+                    <ul class="flex flex-col gap-2">
+                      <For each={column.links}>
+                        {(link) => (
+                          <li>
+                            <a
+                              href={link.href}
+                              class="text-sm text-muted-foreground transition-colors hover:text-foreground"
+                            >
+                              {link.label}
+                            </a>
+                          </li>
+                        )}
+                      </For>
+                    </ul>
+                  </nav>
+                )}
+              </For>
+            </div>
+          </Show>
+        </div>
+        <div class="flex flex-col-reverse items-start gap-4 border-t border-border/60 pt-6 sm:flex-row sm:items-center sm:justify-between">
+          <p class="text-xs text-muted-foreground">{copyright()}</p>
+          <Show when={props.social?.length}>
+            <ul class="flex flex-wrap gap-1">
+              <For each={props.social}>
+                {(item) => (
+                  <li>
+                    <a
+                      href={item.href}
+                      target="_blank"
+                      rel="noreferrer"
+                      aria-label={SOCIAL_LABEL[item.network]}
+                      class="grid h-10 w-10 place-items-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
+                    >
+                      <SocialIcon network={item.network} class="h-4 w-4" />
+                    </a>
+                  </li>
+                )}
+              </For>
+            </ul>
+          </Show>
+        </div>
+      </div>
+    </footer>
+  )
+}

package/src/ui/SiteNav.tsx

@@ -0,0 +1,146 @@
+// SiteNav — the top navigation bar of a marketing site: brand, links, an
+// optional call-to-action, and a disclosure menu below `md`.
+import { Menu, X } from 'lucide-solid'
+import type { JSX } from 'solid-js'
+import { createSignal, createUniqueId, For, onCleanup, onMount, Show } from 'solid-js'
+
+import { cn } from '../lib/cn'
+import { Button } from './Button'
+import type { SectionLink } from './internal/sectionKit'
+
+export interface SiteNavProps {
+  /** Brand name shown at the left; also the home link's text. */
+  brand: string
+  /** Logo image URL shown before the brand name. */
+  logo?: string
+  /** Where the brand links to. Defaults to `'/'`. */
+  brandHref?: string
+  /** Navigation links, in order. */
+  links: SectionLink[]
+  /** Call-to-action button at the right (and at the bottom of the mobile menu). */
+  cta?: SectionLink
+  /** Stick to the top of the viewport while scrolling. Defaults to `true`. */
+  sticky?: boolean
+  /** Accessible label of the mobile menu button. Defaults to `'Menu'`. */
+  menuLabel?: string
+  class?: string
+}
+
+const LINK =
+  'rounded-md px-3 py-2 text-sm font-medium text-muted-foreground transition-colors hover:text-foreground'
+
+/**
+ * Top navigation bar for a marketing site: brand (with optional logo), links and
+ * a call-to-action on a frosted glass bar. Below the `md` breakpoint the links
+ * collapse into a menu button that opens a panel under the bar; it closes on
+ * Escape, on outside click and when a link is followed.
+ *
+ * @example
+ * ```tsx
+ * <SiteNav
+ *   brand="Northwind"
+ *   links={[{ label: 'Features', href: '#features' }, { label: 'Pricing', href: '#pricing' }]}
+ *   cta={{ label: 'Get started', href: '/signup' }}
+ * />
+ * ```
+ */
+export function SiteNav(props: SiteNavProps): JSX.Element {
+  const [open, setOpen] = createSignal(false)
+  const panelId = createUniqueId()
+  let root: HTMLElement | undefined
+
+  onMount(() => {
+    const onKey = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') setOpen(false)
+    }
+    const onDown = (event: PointerEvent) => {
+      if (open() && root && !root.contains(event.target as Node)) setOpen(false)
+    }
+    document.addEventListener('keydown', onKey)
+    document.addEventListener('pointerdown', onDown)
+    onCleanup(() => {
+      document.removeEventListener('keydown', onKey)
+      document.removeEventListener('pointerdown', onDown)
+    })
+  })
+
+  return (
+    <header
+      ref={root}
+      class={cn(
+        'bg-glass z-40 w-full border-b border-border/60 backdrop-blur-xl',
+        props.sticky !== false && 'sticky top-0',
+        props.class,
+      )}
+    >
+      <nav
+        aria-label="Main"
+        class="mx-auto flex h-16 w-full max-w-6xl items-center justify-between gap-4 px-5"
+      >
+        <a href={props.brandHref ?? '/'} class="flex min-w-0 items-center gap-2 text-foreground">
+          <Show when={props.logo}>
+            <img src={props.logo} alt="" class="h-8 w-8 shrink-0 rounded-md object-contain" />
+          </Show>
+          <span class="truncate text-base font-semibold tracking-tight">{props.brand}</span>
+        </a>
+
+        <ul class="hidden items-center gap-1 md:flex">
+          <For each={props.links}>
+            {(link) => (
+              <li>
+                <a href={link.href} class={LINK}>
+                  {link.label}
+                </a>
+              </li>
+            )}
+          </For>
+        </ul>
+
+        <div class="flex items-center gap-2">
+          <Show when={props.cta}>
+            {(cta) => (
+              <Button href={cta().href} class="hidden md:inline-flex">
+                {cta().label}
+              </Button>
+            )}
+          </Show>
+          <button
+            type="button"
+            class="inline-flex h-10 w-10 items-center justify-center rounded-md text-foreground hover:bg-muted focus:outline-none focus:ring-2 focus:ring-ring md:hidden"
+            aria-label={props.menuLabel ?? 'Menu'}
+            aria-expanded={open()}
+            aria-controls={panelId}
+            onClick={() => setOpen((value) => !value)}
+          >
+            <Show when={open()} fallback={<Menu class="h-5 w-5" aria-hidden="true" />}>
+              <X class="h-5 w-5" aria-hidden="true" />
+            </Show>
+          </button>
+        </div>
+      </nav>
+
+      <div id={panelId} hidden={!open()} class="border-t border-border/60 md:hidden">
+        <ul class="mx-auto flex max-w-6xl flex-col gap-1 px-5 py-3">
+          <For each={props.links}>
+            {(link) => (
+              <li>
+                <a href={link.href} class={cn(LINK, 'block py-3 text-base')} onClick={() => setOpen(false)}>
+                  {link.label}
+                </a>
+              </li>
+            )}
+          </For>
+          <Show when={props.cta}>
+            {(cta) => (
+              <li class="pt-2">
+                <Button href={cta().href} class="w-full" onClick={() => setOpen(false)}>
+                  {cta().label}
+                </Button>
+              </li>
+            )}
+          </Show>
+        </ul>
+      </div>
+    </header>
+  )
+}

package/src/ui/TeamGrid.tsx

@@ -0,0 +1,81 @@
+// TeamGrid — the people behind a business: photo, name, role and a short bio.
+import type { JSX } from 'solid-js'
+import { For, Show } from 'solid-js'
+
+import { cn } from '../lib/cn'
+import { Avatar } from './Avatar'
+import { Card } from './Card'
+import { initials, SectionHeading } from './internal/sectionKit'
+
+/** One person rendered by {@link TeamGrid}. */
+export interface TeamMember {
+  name: string
+  role: string
+  /** Photo URL. Falls back to the name's initials. */
+  photo?: string
+  /** One or two sentences about the person. */
+  bio?: string
+}
+
+export interface TeamGridProps {
+  title?: string
+  subtitle?: string
+  members: TeamMember[]
+  /** Columns on wide screens. Defaults to `3`. */
+  columns?: 2 | 3 | 4
+  /** Anchor id for in-page navigation. */
+  id?: string
+  class?: string
+}
+
+const COLS: Record<2 | 3 | 4, string> = {
+  2: 'sm:grid-cols-2',
+  3: 'sm:grid-cols-2 lg:grid-cols-3',
+  4: 'sm:grid-cols-2 lg:grid-cols-4',
+}
+
+/**
+ * Team section: a responsive grid of glass cards with each person's photo (or
+ * initials), name, role and an optional short bio.
+ *
+ * @example
+ * ```tsx
+ * <TeamGrid
+ *   title="Our team"
+ *   members={[{ name: 'Ana Ruiz', role: 'Founder', bio: 'Ten years building for small shops.' }]}
+ * />
+ * ```
+ */
+export function TeamGrid(props: TeamGridProps): JSX.Element {
+  return (
+    <section
+      id={props.id}
+      class={cn('mx-auto flex w-full max-w-6xl flex-col gap-12 px-5 py-20', props.class)}
+    >
+      <SectionHeading title={props.title} subtitle={props.subtitle} />
+      <ul class={cn('grid gap-6', COLS[props.columns ?? 3])}>
+        <For each={props.members}>
+          {(member) => (
+            <li class="flex">
+              <Card glass class="flex w-full flex-col items-center gap-3 p-6 text-center">
+                <Avatar
+                  src={member.photo}
+                  alt=""
+                  fallback={initials(member.name)}
+                  class="h-24 w-24 text-lg"
+                />
+                <div>
+                  <h3 class="text-base font-semibold text-foreground">{member.name}</h3>
+                  <p class="text-sm text-primary">{member.role}</p>
+                </div>
+                <Show when={member.bio}>
+                  <p class="text-sm leading-relaxed text-muted-foreground">{member.bio}</p>
+                </Show>
+              </Card>
+            </li>
+          )}
+        </For>
+      </ul>
+    </section>
+  )
+}

package/src/ui/Testimonials.tsx

@@ -0,0 +1,103 @@
+// Testimonials — customer quotes as a grid of cards or a scrolling marquee.
+import type { JSX } from 'solid-js'
+import { For, Show } from 'solid-js'
+
+import { cn } from '../lib/cn'
+import { Avatar } from './Avatar'
+import { Card } from './Card'
+import { initials, SectionHeading } from './internal/sectionKit'
+import { Marquee } from './Marquee'
+
+/** One quote rendered by {@link Testimonials}. */
+export interface TestimonialItem {
+  quote: string
+  /** Who said it. */
+  name: string
+  /** Job title and/or company, e.g. `"CTO, Northwind"`. */
+  role?: string
+  /** Avatar image URL. Falls back to the name's initials. */
+  avatar?: string
+}
+
+/** Arrangement of {@link Testimonials}. */
+export type TestimonialsLayout = 'grid' | 'marquee'
+
+export interface TestimonialsProps {
+  title?: string
+  subtitle?: string
+  items: TestimonialItem[]
+  /** `'grid'` (default) or a horizontally scrolling `'marquee'` (still under reduced motion). */
+  layout?: TestimonialsLayout
+  /** Anchor id for in-page navigation. */
+  id?: string
+  class?: string
+}
+
+function Quote(props: { item: TestimonialItem; class?: string }): JSX.Element {
+  return (
+    <Card glass class={cn('flex h-full flex-col justify-between gap-6 p-6', props.class)}>
+      <blockquote class="text-pretty text-base leading-relaxed text-foreground">
+        <p>“{props.item.quote}”</p>
+      </blockquote>
+      <figcaption class="flex items-center gap-3">
+        <Avatar src={props.item.avatar} alt="" fallback={initials(props.item.name)} class="h-10 w-10" />
+        <div class="min-w-0">
+          <p class="truncate text-sm font-semibold text-foreground">{props.item.name}</p>
+          <Show when={props.item.role}>
+            <p class="truncate text-xs text-muted-foreground">{props.item.role}</p>
+          </Show>
+        </div>
+      </figcaption>
+    </Card>
+  )
+}
+
+/**
+ * Social-proof section of customer quotes, each with the person's name, role
+ * and avatar (initials when no image). Lay them out as a responsive grid of
+ * glass cards, or as a marquee that scrolls sideways and pauses on hover.
+ *
+ * @example
+ * ```tsx
+ * <Testimonials
+ *   title="Loved by small teams"
+ *   items={[{ quote: 'We launched in two days.', name: 'Ana Ruiz', role: 'Founder, Brisa' }]}
+ * />
+ * ```
+ */
+export function Testimonials(props: TestimonialsProps): JSX.Element {
+  return (
+    <section id={props.id} class={cn('mx-auto flex w-full max-w-6xl flex-col gap-12 py-20', props.class)}>
+      <SectionHeading title={props.title} subtitle={props.subtitle} class="px-5" />
+      <Show
+        when={props.layout === 'marquee'}
+        fallback={
+          <ul class="grid gap-6 px-5 sm:grid-cols-2 lg:grid-cols-3">
+            <For each={props.items}>
+              {(item) => (
+                <li>
+                  <figure class="h-full">
+                    <Quote item={item} />
+                  </figure>
+                </li>
+              )}
+            </For>
+          </ul>
+        }
+      >
+        <Marquee
+          speed={Math.max(20, props.items.length * 8)}
+          class="[mask-image:linear-gradient(to_right,transparent,black_8%,black_92%,transparent)]"
+        >
+          <For each={props.items}>
+            {(item) => (
+              <figure class="mx-3 w-[18rem] shrink-0 sm:w-[22rem]">
+                <Quote item={item} />
+              </figure>
+            )}
+          </For>
+        </Marquee>
+      </Show>
+    </section>
+  )
+}

package/src/ui/TimeField.tsx

@@ -8,6 +8,7 @@ import type { JSX } from 'solid-js'
 import { For, Show, createEffect, createMemo, createSignal, onCleanup } from 'solid-js'
 import { Portal } from 'solid-js/web'
 
+import { createAnchorReflow } from '../lib/anchored'
 import { cn } from '../lib/cn'
 
 type AmPm = 'AM' | 'PM'
@@ -146,17 +147,25 @@ export function TimeField(props: TimeFieldProps): JSX.Element {
 
   // Wire/tear-down the global listeners strictly around the open state. Scroll/
   // resize close the popover (its fixed position would otherwise drift).
+  // Follow the trigger rather than closing. The panel is `fixed` at the
+  // trigger's rect, so a scroll makes that rect stale — it does not make the
+  // panel unwanted. Closing on any captured scroll made this unusable on a
+  // scrolling page: clicking a trigger below the fold scrolls it into view,
+  // and that scroll arrived right after the panel opened and shut it in the
+  // same gesture. See `createAnchorReflow`.
+  const reflow = createAnchorReflow({ anchor: () => btnRef, place, close })
+
   const toggleListeners = (isOpen: boolean) => {
     if (isOpen) {
       document.addEventListener('mousedown', onDocPointer)
       document.addEventListener('keydown', onKey)
-      window.addEventListener('scroll', close, true)
-      window.addEventListener('resize', close)
+      window.addEventListener('scroll', reflow, true)
+      window.addEventListener('resize', reflow)
     } else {
       document.removeEventListener('mousedown', onDocPointer)
       document.removeEventListener('keydown', onKey)
-      window.removeEventListener('scroll', close, true)
-      window.removeEventListener('resize', close)
+      window.removeEventListener('scroll', reflow, true)
+      window.removeEventListener('resize', reflow)
     }
   }
   // Reactively attach when open flips; always clean up on unmount.
@@ -214,9 +223,10 @@ export function TimeField(props: TimeFieldProps): JSX.Element {
         <Portal>
           <div
             ref={popRef}
+            data-a4-floating
             style={{ position: 'fixed', top: `${pos().top}px`, left: `${pos().left}px` }}
             class={cn(
-              'z-50 flex gap-1 divide-x divide-border rounded-lg border border-border bg-card p-2 text-card-foreground shadow-lg',
+              'pointer-events-auto z-50 flex gap-1 divide-x divide-border rounded-lg border border-border bg-card p-2 text-card-foreground shadow-lg',
               props.hour12 ? 'w-56' : 'w-44',
             )}
           >

package/src/ui/internal/sectionKit.tsx

@@ -0,0 +1,72 @@
+// Shared pieces of the page-section blocks (Hero, FeatureGrid, Testimonials,
+// Faq, CtaBanner, ContactSection, TeamGrid, SiteNav, SiteFooter): the plain-data
+// link type and the centered heading every section opens with.
+import type { JSX } from 'solid-js'
+import { Show } from 'solid-js'
+
+import { cn } from '../../lib/cn'
+
+/** A plain link used by the page-section blocks: visible text plus a URL. */
+export interface SectionLink {
+  /** Visible text. */
+  label: string
+  /** Destination URL, in-page anchor (`#features`) or `mailto:`/`tel:` link. */
+  href: string
+}
+
+interface SectionHeadingProps {
+  eyebrow?: string
+  title?: string
+  subtitle?: string
+  /** Heading level of `title`. Defaults to `2`. */
+  level?: 1 | 2
+  align?: 'center' | 'left'
+  class?: string
+}
+
+/** Eyebrow + title + subtitle stack. Renders nothing when all three are empty. */
+export function SectionHeading(props: SectionHeadingProps): JSX.Element {
+  const center = () => (props.align ?? 'center') === 'center'
+  return (
+    <Show when={props.eyebrow || props.title || props.subtitle}>
+      <div
+        class={cn(
+          'flex flex-col gap-3',
+          center() && 'mx-auto max-w-2xl items-center text-center',
+          props.class,
+        )}
+      >
+        <Show when={props.eyebrow}>
+          <p class="text-xs font-semibold uppercase tracking-[0.2em] text-primary">{props.eyebrow}</p>
+        </Show>
+        <Show when={props.title}>
+          <Show
+            when={props.level === 1}
+            fallback={
+              <h2 class="text-balance text-3xl font-semibold tracking-tight text-foreground sm:text-4xl">
+                {props.title}
+              </h2>
+            }
+          >
+            <h1 class="text-balance text-4xl font-bold tracking-tight text-foreground sm:text-5xl lg:text-6xl">
+              {props.title}
+            </h1>
+          </Show>
+        </Show>
+        <Show when={props.subtitle}>
+          <p class="text-pretty text-base text-muted-foreground sm:text-lg">{props.subtitle}</p>
+        </Show>
+      </div>
+    </Show>
+  )
+}
+
+/** Up-to-two-letter initials for avatar fallbacks. */
+export function initials(name: string): string {
+  return name
+    .split(/\s+/)
+    .filter(Boolean)
+    .slice(0, 2)
+    .map((part) => part[0]?.toUpperCase() ?? '')
+    .join('')
+}

package/src/ui/internal/socialIcons.tsx

@@ -0,0 +1,41 @@
+// Social network glyphs for SiteFooter. Path data from Simple Icons (CC0 1.0),
+// inlined so the library does not depend on an icon package that ships brand marks.
+import type { JSX } from 'solid-js'
+
+/** Social networks {@link SiteFooter} can link to. */
+export type SocialNetwork = 'x' | 'instagram' | 'facebook' | 'linkedin' | 'github' | 'youtube' | 'tiktok'
+
+const PATHS: Record<SocialNetwork, string> = {
+  x: 'M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z',
+  instagram:
+    'M7.0301.084c-1.2768.0602-2.1487.264-2.911.5634-.7888.3075-1.4575.72-2.1228 1.3877-.6652.6677-1.075 1.3368-1.3802 2.127-.2954.7638-.4956 1.6365-.552 2.914-.0564 1.2775-.0689 1.6882-.0626 4.947.0062 3.2586.0206 3.6671.0825 4.9473.061 1.2765.264 2.1482.5635 2.9107.308.7889.72 1.4573 1.388 2.1228.6679.6655 1.3365 1.0743 2.1285 1.38.7632.295 1.6361.4961 2.9134.552 1.2773.056 1.6884.069 4.9462.0627 3.2578-.0062 3.668-.0207 4.9478-.0814 1.28-.0607 2.147-.2652 2.9098-.5633.7889-.3086 1.4578-.72 2.1228-1.3881.665-.6682 1.0745-1.3378 1.3795-2.1284.2957-.7632.4966-1.636.552-2.9124.056-1.2809.0692-1.6898.063-4.948-.0063-3.2583-.021-3.6668-.0817-4.9465-.0607-1.2797-.264-2.1487-.5633-2.9117-.3084-.7889-.72-1.4568-1.3876-2.1228C21.2982 1.33 20.628.9208 19.8378.6165 19.074.321 18.2017.1197 16.9244.0645 15.6471.0093 15.236-.005 11.977.0014 8.718.0076 8.31.0215 7.0301.0839m.1402 21.6932c-1.17-.0509-1.8053-.2453-2.2287-.408-.5606-.216-.96-.4771-1.3819-.895-.422-.4178-.6811-.8186-.9-1.378-.1644-.4234-.3624-1.058-.4171-2.228-.0595-1.2645-.072-1.6442-.079-4.848-.007-3.2037.0053-3.583.0607-4.848.05-1.169.2456-1.805.408-2.2282.216-.5613.4762-.96.895-1.3816.4188-.4217.8184-.6814 1.3783-.9003.423-.1651 1.0575-.3614 2.227-.4171 1.2655-.06 1.6447-.072 4.848-.079 3.2033-.007 3.5835.005 4.8495.0608 1.169.0508 1.8053.2445 2.228.408.5608.216.96.4754 1.3816.895.4217.4194.6816.8176.9005 1.3787.1653.4217.3617 1.056.4169 2.2263.0602 1.2655.0739 1.645.0796 4.848.0058 3.203-.0055 3.5834-.061 4.848-.051 1.17-.245 1.8055-.408 2.2294-.216.5604-.4763.96-.8954 1.3814-.419.4215-.8181.6811-1.3783.9-.4224.1649-1.0577.3617-2.2262.4174-1.2656.0595-1.6448.072-4.8493.079-3.2045.007-3.5825-.006-4.848-.0608M16.953 5.5864A1.44 1.44 0 1 0 18.39 4.144a1.44 1.44 0 0 0-1.437 1.4424M5.8385 12.012c.0067 3.4032 2.7706 6.1557 6.173 6.1493 3.4026-.0065 6.157-2.7701 6.1506-6.1733-.0065-3.4032-2.771-6.1565-6.174-6.1498-3.403.0067-6.156 2.771-6.1496 6.1738M8 12.0077a4 4 0 1 1 4.008 3.9921A3.9996 3.9996 0 0 1 8 12.0077',
+  facebook:
+    'M9.101 23.691v-7.98H6.627v-3.667h2.474v-1.58c0-4.085 1.848-5.978 5.858-5.978.401 0 .955.042 1.468.103a8.68 8.68 0 0 1 1.141.195v3.325a8.623 8.623 0 0 0-.653-.036 26.805 26.805 0 0 0-.733-.009c-.707 0-1.259.096-1.675.309a1.686 1.686 0 0 0-.679.622c-.258.42-.374.995-.374 1.752v1.297h3.919l-.386 2.103-.287 1.564h-3.246v8.245C19.396 23.238 24 18.179 24 12.044c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.628 3.874 10.35 9.101 11.647Z',
+  linkedin:
+    'M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z',
+  github:
+    'M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12',
+  youtube:
+    'M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z',
+  tiktok:
+    'M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z',
+}
+
+/** Human-readable network names, used as accessible link labels. */
+export const SOCIAL_LABEL: Record<SocialNetwork, string> = {
+  x: 'X',
+  instagram: 'Instagram',
+  facebook: 'Facebook',
+  linkedin: 'LinkedIn',
+  github: 'GitHub',
+  youtube: 'YouTube',
+  tiktok: 'TikTok',
+}
+
+export function SocialIcon(props: { network: SocialNetwork; class?: string }): JSX.Element {
+  return (
+    <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" class={props.class}>
+      <path d={PATHS[props.network]} />
+    </svg>
+  )
+}