// title: Task list with per-task priority flag toggles "use client"; import { CalendarIcon, CheckIcon, FlagIcon } from "lucide-react"; import { useState } from "react"; import { Toggle } from "@/registry/default/ui/toggle"; type Priority = "low" | "medium" | "high" | "urgent"; const priorities: { color: string; id: Priority; label: string; }[] = [ { color: "text-muted-foreground", id: "low", label: "Low" }, { color: "text-info-foreground", id: "medium", label: "Medium" }, { color: "text-warning-foreground", id: "high", label: "High" }, { color: "text-destructive-foreground", id: "urgent", label: "Urgent" }, ]; const tasks = [ { due: "Today", id: "t1", status: "open", title: "Review PR #482" }, { due: "Tomorrow", id: "t2", status: "open", title: "Update API docs" }, { due: "Jun 10", id: "t3", status: "open", title: "Write release notes" }, ]; export function Pattern() { const [taskPriorities, setTaskPriorities] = useState< Record >({ t1: "high", t2: "medium", t3: "low" }); const [done, setDone] = useState>(new Set()); return (

Task priority

{tasks.map((task) => (

setDone((prev) => { const next = new Set(prev); next.has(task.id) ? next.delete(task.id) : next.add(task.id); return next; }) } pressed={done.has(task.id)} size="sm" > {task.title}

{task.due}

{priorities.map((p) => ( setTaskPriorities((prev) => ({ ...prev, [task.id]: p.id })) } pressed={taskPriorities[task.id] === p.id} size="sm" > {p.label} ))}

))}

); }