Scale

1"use client";
2 
3import { DndGrid, type Layout } from "@dnd-grid/react";
4import { type CSSProperties, useState } from "react";
5 
6const scaleOptions = [0.75, 1, 1.25];
7 
8const initialLayout: Layout = [
9  { id: "a", x: 0, y: 0, w: 3, h: 2 },
10  { id: "b", x: 3, y: 0, w: 3, h: 2 },
11  { id: "c", x: 6, y: 0, w: 3, h: 2 },
12  { id: "d", x: 0, y: 2, w: 6, h: 2 },
13  { id: "e", x: 6, y: 2, w: 3, h: 3 },
14];
15 
16export function ScaleExample() {
17  const [layout, setLayout] = useState<Layout>(initialLayout);
18  const [scale, setScale] = useState(1);
19 
20  const scaledStyle: CSSProperties & Record<"--dnd-grid-scale", number> = {
21    transform: `scale(${scale})`,
22    transformOrigin: "top left",
23    "--dnd-grid-scale": scale,
24  };
25 
26  return (
27    <div>
28      <div style={{ display: "flex", gap: 8, marginBottom: 12 }}>
29        {scaleOptions.map((value) => (
30          <button key={value} onClick={() => setScale(value)} type="button">
31            {value}x
32          </button>
33        ))}
34      </div>
35 
36      <DndGrid
37        cols={12}
38        containerProps={{ style: scaledStyle }}
39        layout={layout}
40        onLayoutChange={setLayout}
41        rowHeight={50}
42        transformScale={scale}
43      >
44        {layout.map((item) => (
45          <div className="grid-item" key={item.id}>
46            {item.id}
47          </div>
48        ))}
49      </DndGrid>
50    </div>
51  );
52}