Responsive layout

1"use client";
2 
3import { ResponsiveDndGrid, type ResponsiveLayouts } from "@dnd-grid/react";
4 
5const layouts: ResponsiveLayouts = {
6  lg: [
7    { id: "a", x: 0, y: 0, w: 6, h: 2 },
8    { id: "b", x: 6, y: 0, w: 3, h: 2 },
9    { id: "c", x: 9, y: 0, w: 3, h: 2 },
10    { id: "d", x: 0, y: 2, w: 12, h: 2 },
11  ],
12  sm: [
13    { id: "a", x: 0, y: 0, w: 4, h: 2 },
14    { id: "b", x: 0, y: 2, w: 4, h: 2 },
15    { id: "c", x: 0, y: 4, w: 4, h: 2 },
16    { id: "d", x: 0, y: 6, w: 4, h: 2 },
17  ],
18};
19 
20const cards = ["a", "b", "c", "d"];
21 
22export function ResponsiveExample() {
23  return (
24    <ResponsiveDndGrid
25      containerPadding={{ lg: 16, sm: 12 }}
26      gap={{ lg: 16, sm: 12 }}
27      layouts={layouts}
28      rowHeight={48}
29    >
30      {cards.map((id) => (
31        <div key={id}>{id}</div>
32      ))}
33    </ResponsiveDndGrid>
34  );
35}