Routine checklist

"use client";
import * as React from "react";
import { RoutineChecklist, type RoutineChecklistItem } from "@/components/ui/notchset/routine-checklist";

export default function RoutineChecklistDemo() {
  const [items, setItems] = React.useState<RoutineChecklistItem[]>([
    { id: "mg", at: "07:10", title: "Magnesium, 200 mg", done: true, by: "ticked 07:10" },
    { id: "walk", at: "08:10", title: "Walk, 30 min", done: true, by: "from the ring", note: "Before work" },
    { id: "d3", at: "13:00", title: "Vitamin D3, 2,000 IU with lunch", done: false },
    { id: "screens", at: "22:45", title: "Screens off", done: false },
    { id: "bed", at: "23:15", title: "In bed", done: false, pick: true, by: "the coach's pick for tonight" },
  ]);
  return (
    <div className="w-full max-w-[520px]">
      <RoutineChecklist
        items={items}
        onToggle={(id, done) => setItems((xs) => xs.map((x) => (x.id === id ? { ...x, done, by: done ? "ticked just now" : undefined } : x)))}
        onNote={(id, note) => setItems((xs) => xs.map((x) => (x.id === id ? { ...x, note: note || undefined } : x)))}
      />
    </div>
  );
}