Compactor showcase

1"use client";
2 
3import {
4  DndGrid,
5  horizontalCompactor,
6  type Layout,
7  noCompactor,
8  verticalCompactor,
9} from "@dnd-grid/react";
10import { useState } from "react";
11 
12const initialLayout: Layout = [
13  { id: "a", x: 0, y: 0, w: 2, h: 2 },
14  { id: "b", x: 5, y: 0, w: 3, h: 2 },
15  { id: "c", x: 9, y: 0, w: 2, h: 2 },
16  { id: "d", x: 0, y: 4, w: 4, h: 2 },
17  { id: "e", x: 6, y: 6, w: 3, h: 3 },
18  { id: "f", x: 2, y: 9, w: 2, h: 2 },
19];
20 
21const compactors = {
22  vertical: verticalCompactor,
23  horizontal: horizontalCompactor,
24  none: noCompactor,
25} as const;
26 
27type CompactorKey = keyof typeof compactors;
28 
29export function CompactorShowcaseExample() {
30  const [layout, setLayout] = useState<Layout>(initialLayout);
31  const [compactorKey, setCompactorKey] = useState<CompactorKey>("vertical");
32 
33  return (
34    <div>
35      <div style={{ display: "flex", gap: 8, marginBottom: 12 }}>
36        {(
37          [
38            { id: "vertical", label: "Vertical" },
39            { id: "horizontal", label: "Horizontal" },
40            { id: "none", label: "None" },
41          ] as const
42        ).map((option) => (
43          <button
44            key={option.id}
45            onClick={() => setCompactorKey(option.id)}
46            type="button"
47          >
48            {option.label}
49          </button>
50        ))}
51      </div>
52 
53      <DndGrid
54        cols={12}
55        compactor={compactors[compactorKey]}
56        layout={layout}
57        onLayoutChange={setLayout}
58        rowHeight={50}
59      >
60        {layout.map((item) => (
61          <div className="grid-item" key={item.id}>
62            {item.id}
63          </div>
64        ))}
65      </DndGrid>
66    </div>
67  );
68}