TaskList

A Tasks page: optional group headers with a count, then rows of a round complete-checkbox + title + trailing meta (due date, record chip, assignee). Completed rows strike through; overdue due-dates go red. Toggling is controlled via onToggle.

This is a measured rebuild of a specific Tasks screen; it takes your own task data, so use it as-is rather than reaching for a generic checklist primitive.

Installation

npm install @crisp-ui-kit/crisp

Usage

import { TaskList } from "@crisp-ui-kit/crisp";

<TaskList
  onToggle={(id, done) => update(id, done)}
  groups={[
    {
      label: "Today",
      tasks: [
        { id: "a", title: "moon's task", due: "Due 5 days ago", overdue: true },
      ],
    },
  ]}
/>;

Props

Task = { id, title, done?, due?, overdue?, meta? } — meta is right-aligned trailing content (record chip, assignee avatar …).