All Work Browse
Company-grouped work browser with a sticky jump-nav, scroll-spy active state, and per-group WorkSection panels.
AllWorkBrowse groups work items by company, sorts groups by latest activity date, and renders a sticky horizontal jump-nav with scroll-spy highlighting. Each group renders a WorkSection with keyboard navigation disabled when not in view.
Installation
npx shadcn@latest add @adv/all-work-browseUsage
import { AllWorkBrowse } from '@/components/sections/all-work-browse';
<AllWorkBrowse
items={allWorkItems}
companyMeta={[
{ company: 'SigNoz', logo: '/logos/signoz.svg', href: '/work/signoz' },
]}
onSelect={(item, href) => router.push(href)}
/>Example
Props
| Prop | Type | Default | Description |
|---|---|---|---|
items | AllWorkBrowseItem[] | — | Work items with a required company field. |
companyMeta | CompanyMeta[] | [] | Optional company overrides: { company, slug?, logo?, href? }. |
getItemVisibility | (item) => 'visible' | 'hidden' | 'inert' | () => 'visible' | Per-item visibility forwarded to each WorkSection. |
onSelect | (item, href) => void | — | Navigation callback forwarded to each WorkSection. |
getItemHref | (item) => string | /work/{company | id} | Custom href builder forwarded to each WorkSection. |
Work Section
A full work list with a sticky scramble-text heading, a custom cyberpunk cursor on hover, side preview panel, BorderPattern indicators, and per-item visibility gating.
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.