Toolbox

1"use client";
2 
3import { DndGrid, type Layout } from "@dnd-grid/react";
4import { type CSSProperties, useState } from "react";
5 
6interface ToolboxItem {
7  id: string;
8  x: number;
9  y: number;
10  w: number;
11  h: number;
12  visible: boolean;
13}
14 
15const initialItems: ToolboxItem[] = [
16  { id: "a", x: 0, y: 0, w: 2, h: 2, visible: true },
17  { id: "b", x: 2, y: 0, w: 2, h: 2, visible: true },
18  { id: "c", x: 4, y: 0, w: 2, h: 2, visible: false },
19  { id: "d", x: 6, y: 0, w: 2, h: 2, visible: false },
20];
21 
22const removeButtonStyle: CSSProperties = {
23  position: "absolute",
24  top: 6,
25  right: 6,
26  width: 22,
27  height: 22,
28  borderRadius: 9999,
29  border: "1px solid #e5e7eb",
30  background: "white",
31  color: "#0f172a",
32  display: "inline-flex",
33  alignItems: "center",
34  justifyContent: "center",
35  fontSize: 12,
36  lineHeight: "1",
37  cursor: "pointer",
38  boxShadow: "0 1px 2px rgba(15, 23, 42, 0.08)",
39};
40 
41export function ToolboxExample() {
42  const [items, setItems] = useState<ToolboxItem[]>(initialItems);
43 
44  const toggleItem = (id: string) => {
45    setItems((prev) =>
46      prev.map((item) =>
47        item.id === id ? { ...item, visible: !item.visible } : item
48      )
49    );
50  };
51 
52  const visibleItems = items.filter((item) => item.visible);
53  const hiddenItems = items.filter((item) => !item.visible);
54  const visibleLayout: Layout = visibleItems.map(
55    ({ visible, ...item }) => item
56  );
57 
58  const handleLayoutChange = (newLayout: Layout) => {
59    setItems((prev) =>
60      prev.map((item) => {
61        const updated = newLayout.find((l) => l.id === item.id);
62        return updated ? { ...item, ...updated } : item;
63      })
64    );
65  };
66 
67  return (
68    <div>
69      <div className="toolbox">
70        <div>Toolbox (click to add)</div>
71        {hiddenItems.map((item) => (
72          <button
73            key={item.id}
74            onClick={() => toggleItem(item.id)}
75            type="button"
76          >
77            {item.id}
78          </button>
79        ))}
80      </div>
81 
82      <DndGrid
83        cols={12}
84        layout={visibleLayout}
85        onLayoutChange={handleLayoutChange}
86        rowHeight={50}
87      >
88        {visibleItems.map((item) => (
89          <div className="grid-item" key={item.id}>
90            <span>{item.id}</span>
91            <button
92              aria-label={`Remove ${item.id}`}
93              onClick={() => toggleItem(item.id)}
94              style={removeButtonStyle}
95              title="Remove"
96              type="button"
97            >
98              x
99            </button>
100// … truncated