Archive board 01

---
/**
 * Archive board 01: A framed archive card with a spaced title, a catalogue number and three mounted black-and-white photos, one turned on its side.
 *
 * @block hero
 * @order 58
 */
import Section from '@/components/apogee/Section/Section.astro'
import Heading from '@/components/apogee/Heading/Heading.astro'
import { srcUrl, accentRuns, type HeroContent, type Media } from '@/components/apogee/sections/_shared/spine.ts'

/** @composable */
interface Props extends HeroContent {
  /** The mounted photos; the first is turned on its side. @category content */
  images?: Media[] | null
}

const {
  heading = 'Garment district, seen from above *Midtown, 1931*',
  images = [
    { src: 'https://picsum.photos/id/1048/600/900?grayscale', alt: '' },
    { src: 'https://picsum.photos/id/1031/600/900?grayscale', alt: '' },
    { src: 'https://picsum.photos/id/1067/600/900?grayscale', alt: '' },
  ],
} = Astro.props
---

<Section spacing="none" container={false}>
  <!-- Inverted frame around a card tinted with the primary hue. -->
  <div class="bg-inverted p-3 md:p-5">
    <div class="relative flex flex-col items-center gap-10 bg-[color-mix(in_oklab,var(--background-primary)_12%,var(--background-page))] px-4 py-12 md:gap-16 md:px-12 md:py-20">
      <p class="absolute end-6 top-4 rotate-[-4deg] font-mono text-lg text-neutral-faded tabular-nums md:text-2xl" aria-hidden="true">1276/83<br /><span class="ms-6">B4-5</span></p>
      <Heading as="h1" size="h2" class="max-w-3xl text-center font-normal uppercase tracking-[0.3em] text-balance">{accentRuns(heading).map((r) => (r.accent ? <span class="mt-2 block text-neutral-faded">{r.text}</span> : r.text))}</Heading>
      {images && (
        <ul class="grid w-full max-w-6xl gap-6 sm:grid-cols-3 md:gap-10">
          {images.map((p, i) => (
            <li class="bg-page p-3 shadow-sm md:p-5">
              <div class="aspect-2/3 overflow-hidden">
                <img src={srcUrl(p.src)} alt={p.alt} width={p.width} height={p.height} loading="eager" class:list={['size-full object-cover', i === 0 && 'origin-center rotate-90 scale-150']} />
              </div>
            </li>
          ))}
        </ul>
      )}
    </div>
  </div>
</Section>