Multiple instances

1"use client";
2 
3import { DndGrid, type Layout } from "@dnd-grid/react";
4import { useState } from "react";
5 
6const initialLayoutA: Layout = [
7  { id: "a1", x: 0, y: 0, w: 3, h: 2 },
8  { id: "a2", x: 3, y: 0, w: 3, h: 2 },
9  { id: "a3", x: 6, y: 0, w: 3, h: 2 },
10];
11 
12const initialLayoutB: Layout = [
13  { id: "b1", x: 0, y: 0, w: 4, h: 2 },
14  { id: "b2", x: 4, y: 0, w: 4, h: 2 },
15  { id: "b3", x: 8, y: 0, w: 4, h: 2 },
16];
17 
18export function MultipleInstancesExample() {
19  const [layoutA, setLayoutA] = useState<Layout>(initialLayoutA);
20  const [layoutB, setLayoutB] = useState<Layout>(initialLayoutB);
21 
22  return (
23    <div className="space-y-6">
24      <div>
25        <div className="mb-2 text-xs text-zinc-500">Grid A</div>
26        <DndGrid
27          cols={12}
28          layout={layoutA}
29          onLayoutChange={setLayoutA}
30          rowHeight={50}
31        >
32          {layoutA.map((item) => (
33            <div className="grid-item" key={item.id}>
34              {item.id}
35            </div>
36          ))}
37        </DndGrid>
38      </div>
39      <div>
40        <div className="mb-2 text-xs text-zinc-500">Grid B</div>
41        <DndGrid
42          cols={12}
43          layout={layoutB}
44          onLayoutChange={setLayoutB}
45          rowHeight={50}
46        >
47          {layoutB.map((item) => (
48            <div className="grid-item" key={item.id}>
49              {item.id}
50            </div>
51          ))}
52        </DndGrid>
53      </div>
54    </div>
55  );
56}