Dependency list

"use client";
import * as React from "react";
import { Plus } from "lucide-react";
import { Button } from "@/components/ui/notchset/button";
import { StatusGlyph } from "@/components/ui/notchset/status-glyph";
import { DependencyList } from "@/components/ui/notchset/blocks/dependency-list";

export default function DependencyListDemo() {
  const [by, setBy] = React.useState([{ id: "OM-14", title: "Sync queue survives app restart", state: "in progress", glyph: <StatusGlyph status="doing" label="Sync queue survives app restart" /> }]);
  const [opened, setOpened] = React.useState<string | null>(null);
  return (
    <div className="flex w-full max-w-[520px] flex-col gap-2">
      <DependencyList
        blockedBy={by}
        blocks={[{ id: "RP-71", title: "Offline banner on the day sheet", state: "To do", glyph: <StatusGlyph status="todo" label="Offline banner on the day sheet" /> }]}
        outside="the payments provider's sandbox"
        onOpen={setOpened}
        onRemove={(id) => setBy((b) => b.filter((x) => x.id !== id))}
        add={
          <Button size="sm" variant="ghost" className="self-start" onClick={() => setBy((b) => (b.some((x) => x.id === "RP-57") ? b : [...b, { id: "RP-57", title: "Undo for route edits", state: "in progress", glyph: <StatusGlyph status="doing" label="Undo for route edits" /> }]))}>
            <Plus />
            Add a blocker
          </Button>
        }
      />
      {opened && <p className="m-0 text-[length:var(--ns-text-small)] text-[var(--ns-ink-3)]">Opened {opened}</p>}
    </div>
  );
}