Docs
Dog Spotlight pattern
Highlight a curated set of dogs — e.g. longest-waiting residents — in a 4-across grid, each linking out to their listing.
Standard
- dogs is LocalAdoptableManifestItem[] (from adoptable-local-manifest.ts) — the same source-agnostic manifest shape used elsewhere in the ecosystem, so this data can start as a hand-curated array and later be swapped for an automated GetBuddy/Petfinder/local-manifest pull without changing the component.
- Selection of which dogs to feature is entirely a call-site concern — pass in exactly the curated list, in the order you want it shown. There is no built-in sort/filter.
- Grid is fixed at up to 4 across (`grid-cols-1 sm:grid-cols-2 lg:grid-cols-4`) — this component's whole purpose is the 4-card spotlight row, not a general-purpose gallery, so there is deliberately no `columns` prop.
- Age • gender line is computed via `resolvePetAgeLabel()` from `lib/pet-age.ts` (never hand-rolled) using each item's `age`/`birthDate`.
- The CTA button (default "Meet {Name}", via `labels.ctaPrefix`) renders only when `detailsUrl` is present — a dog without one still renders its card, just without a button. `ctaPrefix` is a plain word/phrase (e.g. "Meet", "Adopt"), never a `{{token}}`-style template string, so it's safe to pass straight through i18next's `t()` without colliding with its own interpolation syntax.
- If `dogs` is empty, the component renders nothing — no empty-state placeholder.
- Distinct from `AdoptablePetsSection` (the full adoptable-pets listing shell with Petfinder/Adopt-a-Pet/GetBuddy/local-manifest provider modes) — this is a small, separate curated highlight, not a listing provider.
Reference
- Live example: Dog Spotlight example page
- Component: `template/src/components/patterns/DogSpotlightSection.tsx`
- Shared type: `LocalAdoptableManifestItem` in `adoptable-local-manifest.ts`
- Governance contract: `internal-tools/4leggedit-websites/docs/governance/module-wiring-contracts.md`