# Clip Card

- Page: <https://kznlabs.github.io/labsUI/components/clip-card>

## Clip Card (`clip-card`, block)

Video tile: AspectRatio thumbnail (16:9 or 9:16), duration Badge, watched Progress along the bottom, and a ContextMenu of actions.

- Install: `npx @kznlabs/labsui add clip-card`
- Docs: <https://kznlabs.github.io/labsUI/components/clip-card>
- Brings: aspect-ratio, badge, button, button-variants, context-menu, dropdown-menu, list, platform, progress, use-anchor, use-controllable-state, use-dismiss, utils
- npm: clsx@^2.1.1, lucide-react@1.63.0, motion@14.7.1, tailwind-merge@^3.7.0

### API

- `<ClipCard>`: Video tile: thumbnail in an AspectRatio, duration Badge, watched Progress and a context menu.
  - `duration: string`: "0:42".
  - `title: string`: Clip name; also the accessible name of the card.
  - `actions?: ReactNode`: Context menu items (`<ContextMenuItem>`s): right-click or Shift+F10 opens them.
  - `meta?: ReactNode`: Small print under the title, e.g. "12.4K views · 2 days ago".
  - `ratio?: number` = `16 / 9`: Width/height, e.g. 9 / 16 for vertical clips.
  - `thumbnail?: ReactNode`: `<img>` thumbnail; a film glyph stands in without one.
  - `watched?: number`: How much was watched, 0 to 100: a thin bar along the bottom of the thumbnail.

### Usage

```tsx
<ClipCard title="Insane 1v4 clutch" duration="0:42" watched={65} meta="12.4K views" actions={<ContextMenuItem onSelect={play}>Play</ContextMenuItem>} />
```

### Example: clip-list.tsx

```tsx
import { ClipCard } from "@/components/blocks/clip-card";
import { ContextMenuItem, ContextMenuSeparator } from "@/components/ui/context-menu";

type Clip = { id: string; title: string; duration: string; thumb: string; watched: number };

export function ClipList({
  clips,
  onPlay,
  onDelete,
}: {
  clips: Clip[];
  onPlay: (id: string) => void;
  onDelete: (id: string) => void;
}) {
  return (
    <div className="grid grid-cols-2 gap-3 md:grid-cols-4">
      {clips.map((c) => (
        <ClipCard
          key={c.id}
          title={c.title}
          duration={c.duration}
          watched={c.watched}
          thumbnail={<img src={c.thumb} alt="" />}
          actions={
            <>
              <ContextMenuItem onSelect={() => onPlay(c.id)}>Play</ContextMenuItem>
              <ContextMenuSeparator />
              <ContextMenuItem variant="destructive" onSelect={() => onDelete(c.id)}>
                Delete
              </ContextMenuItem>
            </>
          }
        />
      ))}
    </div>
  );
}
```