Work List with Preview
A hover-driven work item list with a live side preview panel. Items dim on interaction focus. Navigates via onSelect or native anchor.
WorkListWithPreview renders a left-side list of work items with a right-side live preview (visible on ≥ md). Items dim when any item is focused/hovered. Navigation is fully customisable via onSelect or getItemHref.
Installation
npx shadcn@latest add @adv/work-list-with-previewUsage
import { WorkListWithPreview } from '@/components/sections/work-list-with-preview';
<WorkListWithPreview
items={workItems}
size="display"
maxVisible={5}
viewAllUrl="/work-history"
onSelect={(item, href) => router.push(href)}
/>Example
Props
| Prop | Type | Default | Description |
|---|---|---|---|
items | WorkItem[] | — | Work items: { id, title, role, period, company, description, image?, link? }. |
size | "default" | "display" | "default" | Controls row padding and font sizes. |
maxVisible | number | — | Show a "View all" row after this many items. |
onViewAllClick | () => void | — | Handler for the "View all" row. |
viewAllUrl | string | "#" | href for the "View all" row (used when no onViewAllClick). |
viewAllText | string | "View All Experience" | Label for the "View all" row. |
getItemHref | (item) => string | item.link || /work/{id} | Custom href builder per item. |
onSelect | (item, href) => void | — | Custom navigation callback. Prevents default anchor navigation when provided. |