Discover More

A "Discover More" section that renders 2 random items from a caller-supplied list, with cover images and Next.js links.

DiscoverMore shows up to 2 randomly-selected items from the items array (excluding currentItemId) as linked cards with cover images. The caller supplies the items, so the component is fully decoupled from any data layer — pass work items, blog posts, or any list that satisfies DiscoverMoreItem.

Links are computed automatically: items with a company field get a /work/<company>/case/<id> path; all others use basePath + id.

Installation

npx shadcn@latest add @adv/discover-more

Usage

import { DiscoverMore } from '@/components/ui/DiscoverMore';
import type { DiscoverMoreItem } from '@/components/ui/DiscoverMore';

const items: DiscoverMoreItem[] = [
  { id: 'field-notes', title: 'Field Notes', image: '/covers/field-notes.jpg', company: 'Acme' },
  { id: 'atlas-maps',  title: 'Atlas Maps',  image: '/covers/atlas.jpg',       company: 'Acme' },
];

<DiscoverMore
  items={items}
  currentItemId="aurora-dashboard"
  itemType="case-study"
  basePath="/work/"
/>

Example

DISCOVER MORE

Atlas Maps — Interactive cartography with layered data overlays

Field Notes — A focused long-form reading experience

Props

Prop	Type	Default	Description
`items`	`DiscoverMoreItem[]`	—	Full list of candidate items. The component shuffles and picks 2 (excluding `currentItemId`).
`currentItemId`	`string`	—	ID of the currently-viewed item — excluded from suggestions.
`itemType`	`"work" \| "case-study"`	—	Controls max-width styling; `"case-study"` centers at 680 px.
`basePath`	`string`	—	Prefix for items without a `company` field.

DiscoverMoreItem

export interface DiscoverMoreItem {
  id: string;
  title: string;
  image?: string;
  company?: string;
}