Task card

import { Hourglass, MessageSquare, OctagonAlert } from "lucide-react";
import { Avatar } from "@/components/ui/notchset/avatar";
import { PriorityMark } from "@/components/ui/notchset/priority-mark";
import { TaskCard } from "@/components/ui/notchset/blocks/task-card";

export default function TaskCardDemo() {
  return (
    <div className="grid w-full max-w-[560px] grid-cols-2 gap-2 max-[600px]:grid-cols-1">
      <TaskCard
        id="RP-55"
        code="RP-55"
        title="Route conflicts when two technicians share a van"
        labels={["Backend"]}
        flag={{ icon: <Hourglass />, text: "Stuck · 9 days in progress" }}
        priority={<PriorityMark priority={2} />}
        meta={<span className="inline-flex items-center gap-1"><MessageSquare aria-hidden />2</span>}
        due="Today"
        avatar={<Avatar name="Leo Brandt" size={20} />}
      />
      <TaskCard id="RP-63" code="RP-63" title="Keyboard shortcuts for the planner" labels={["Frontend"]} flag={{ icon: <OctagonAlert />, text: "Waits on RP-57" }} priority={<PriorityMark priority={2} />} due="Oct 29" avatar={<Avatar name="Maya Lindqvist" size={20} />} />
      <TaskCard id="RP-59" code="RP-59" title="Write the v1 to v2 migration plan" priority={<PriorityMark priority={4} />} due="3 days late" late avatar={<Avatar name="Maya Lindqvist" size={20} />} />
      <TaskCard id="RP-48" code="RP-48" title="Planner shell and day picker" done dim due="today" avatar={<Avatar name="Ines Halvorsen" size={20} />} />
    </div>
  );
}