action-bar-demo

1"use client";
2 
3import { Copy, Trash2, X } from "lucide-react";
4import * as React from "react";
5import { cn } from "@/lib/utils";
6import {
7  ActionBar,
8  ActionBarClose,
9  ActionBarGroup,
10  ActionBarItem,
11  ActionBarSelection,
12  ActionBarSeparator,
13} from "@/registry/bases/base/ui/action-bar";
14import { Checkbox } from "@/registry/bases/base/ui/checkbox";
15import { Label } from "@/registry/bases/base/ui/label";
16 
17interface Task {
18  id: string;
19  name: string;
20}
21 
22export default function ActionBarDemo() {
23  const [tasks, setTasks] = React.useState<Task[]>([
24    { id: crypto.randomUUID(), name: "Weekly Status Report" },
25    { id: crypto.randomUUID(), name: "Client Invoice Review" },
26    { id: crypto.randomUUID(), name: "Product Roadmap" },
27    { id: crypto.randomUUID(), name: "Team Standup Notes" },
28  ]);
29  const [selectedTaskIds, setSelectedTaskIds] = React.useState<Set<string>>(
30    new Set(),
31  );
32 
33  const open = selectedTaskIds.size > 0;
34 
35  const onOpenChange = React.useCallback((open: boolean) => {
36    if (!open) {
37      setSelectedTaskIds(new Set());
38    }
39  }, []);
40 
41  const onItemSelect = React.useCallback(
42    (id: string, checked: boolean) => {
43      const newSelected = new Set(selectedTaskIds);
44      if (checked) {
45        newSelected.add(id);
46      } else {
47        newSelected.delete(id);
48      }
49      setSelectedTaskIds(newSelected);
50    },
51    [selectedTaskIds],
52  );
53 
54  const onDuplicate = React.useCallback(() => {
55    const selectedItems = tasks.filter((task) => selectedTaskIds.has(task.id));
56    const duplicates = selectedItems.map((task) => ({
57      ...task,
58      id: crypto.randomUUID(),
59      name: `${task.name} (copy)`,
60    }));
61    setTasks([...tasks, ...duplicates]);
62    setSelectedTaskIds(new Set());
63  }, [tasks, selectedTaskIds]);
64 
65  const onDelete = React.useCallback(() => {
66    setTasks(tasks.filter((task) => !selectedTaskIds.has(task.id)));
67    setSelectedTaskIds(new Set());
68  }, [tasks, selectedTaskIds]);
69 
70  return (
71    <div className="flex w-full flex-col gap-2.5">
72      <h3 className="font-semibold text-lg">Tasks</h3>
73      <div className="flex max-h-72 flex-col gap-1.5 overflow-y-auto">
74        {tasks.map((task) => (
75          <Label
76            key={task.id}
77            className={cn(
78              "flex cursor-pointer items-center gap-2.5 rounded-md border bg-card/70 px-3 py-2.5 transition-colors hover:bg-accent/70",
79              selectedTaskIds.has(task.id) && "bg-accent/70",
80            )}
81          >
82            <Checkbox
83// … truncated