convert dropzone to render drop zone in puck grid row component and w…

…rap each column in a div
commonknowledge · Jan 13, 2025 · 1921c15 · 1921c15
1 parent 273b01d
commit 1921c15
Showing 1 changed file with 18 additions and 25 deletions.
diff --git a/nextjs/src/components/puck/config/blocks/GridRow/index.tsx b/nextjs/src/components/puck/config/blocks/GridRow/index.tsx
@@ -1,4 +1,4 @@
-import { ComponentConfig, DropZone } from '@measured/puck'
+import { ComponentConfig } from '@measured/puck'
 
 export type GridRowProps = {
   columns: string
@@ -19,31 +19,24 @@ export const GridRow: ComponentConfig<GridRowProps> = {
   defaultProps: {
     columns: '4-columns',
   },
-  render: ({ columns }) => {
+  render: ({ columns, puck: { renderDropZone } }) => {
+    const columnCount =
+      columns === '4-columns' ? 4 : columns === '3-columns' ? 3 : 2
+
     return (
-      <>
-        {columns === '4-columns' && (
-          <div className="grid lg:grid-cols-4 sm:grid-cols-2 grid-cols-1 gap-[25px] mb-[25px]">
-            <DropZone zone="Col-1" />
-            <DropZone zone="Col-2" />
-            <DropZone zone="Col-3" />
-            <DropZone zone="Col-4" />
-          </div>
-        )}
-        {columns === '3-columns' && (
-          <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-2 md:gap-3 lg:gap-4 xl:gap-5 mb-8 md:mb-16 lg:mb-20">
-            <DropZone zone="Col-1" />
-            <DropZone zone="Col-2" />
-            <DropZone zone="Col-3" />
-          </div>
-        )}
-        {columns === '2-columns' && (
-          <div className="grid sm:grid-cols-2 gap-2 md:gap-3 lg:gap-4 xl:gap-5 mb-8 md:mb-16 lg:mb-20">
-            <DropZone zone="Col-1" />
-            <DropZone zone="Col-2" />
-          </div>
-        )}
-      </>
+      <div
+        className={`grid ${
+          columnCount === 4
+            ? 'lg:grid-cols-4 sm:grid-cols-2 grid-cols-1'
+            : columnCount === 3
+              ? 'sm:grid-cols-2 lg:grid-cols-3'
+              : 'sm:grid-cols-2'
+        } gap-[25px] mb-[25px]`}
+      >
+        {Array.from({ length: columnCount }).map((_, idx) => (
+          <div key={idx}>{renderDropZone({ zone: `Col-${idx + 1}` })}</div>
+        ))}
+      </div>
     )
   },
 }