Task checklist

"use client";
import { useState } from "react";
import { CheckboxField, ProgressBar, SortableItem, SortableList } from "@nexera-ui/react";

interface Task {
  id: string;
  title: string;
  meta: string;
  locked?: boolean;
  done: boolean;
}

const ONBOARDING: Task[] = [
  {
    id: "contract",
    title: "Sign offer letter",
    meta: "Day 1 · HR · Must stay first",
    locked: true,
    done: true,
  },
  { id: "laptop", title: "Collect laptop and badge", meta: "Day 1 · IT", done: true },
  { id: "payroll", title: "Add bank details for payroll", meta: "Day 1 · Finance", done: false },
  { id: "buddy", title: "Coffee with your onboarding buddy", meta: "Day 2 · Team", done: false },
  {
    id: "security",
    title: "Complete security awareness training",
    meta: "Week 1 · IT",
    done: false,
  },
  {
    id: "goals",
    title: "Agree 30-day goals with your manager",
    meta: "Week 1 · Team",
    done: false,
  },
];

/**
 * Task checklist: tick off onboarding tasks and put them in the order you'll do them. Drag a row, or use the keyboard (arrow
 * to the handle, Enter, arrows, Enter), or the Move menu (Move up / Move down). The first task is locked in place.
 */
export default function TaskChecklist() {
  const [tasks, setTasks] = useState(ONBOARDING);
  const done = tasks.filter((task) => task.done).length;
  const toggle = (id: string, isDone: boolean) => {
    setTasks((list) => list.map((task) => (task.id === id ? { ...task, done: isDone } : task)));
  };

  return (
    <div className="@container bg-page px-4 py-8 @3xl:px-8">
      <div className="mx-auto grid w-full max-w-xl gap-5 rounded-xl border border-default bg-surface p-5 shadow-xs @3xl:p-6">
        <header className="grid gap-1">
          <h2 className="text-heading-h3 text-primary">Welcome to Northwind, Luis</h2>
          <p className="text-body-default text-secondary">
            Your first week. Tick tasks off as you go, and reorder them to suit your week.
          </p>
        </header>
        <ProgressBar
          label="First-week progress"
          labelPosition="top"
          size="md"
          value={done}
          maxValue={tasks.length}
          valueLabel={`${String(done)} of ${String(tasks.length)} done`}
          tone={done === tasks.length ? "success" : "brand"}
        />
        <div className="grid gap-2">
          <h3 id="checklist-title" className="m-0 text-heading-h4 text-primary">
            Your first week
          </h3>
          <SortableList aria-labelledby="checklist-title" items={tasks} onReorder={setTasks}>
            {(task) => (
              <SortableItem
                textValue={task.title}
                label={
                  <CheckboxField
                    label={task.title}
                    isSelected={task.done}
                    isDisabled={task.locked === true}
                    onChange={(isDone) => {
                      toggle(task.id, isDone);
                    }}
                  />
                }
                meta={task.meta}
                isDisabled={task.locked === true}
              />
            )}
          </SortableList>
        </div>
      </div>
    </div>
  );
}