Clip Card

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>  );}