improve flex grid preview

components/Layout.tsx

@@ -0,0 +1,6 @@
+import { useContext } from "preact/hooks";
+import { createContext } from "preact";
+
+export const LayoutContext = createContext({ isPreview: false });
+
+export const useLayoutContext = () => useContext(LayoutContext);

sections/Gallery.tsx

@@ -1,15 +1,24 @@
 import { Section } from "deco/blocks/section.ts";
+import { LayoutContext } from "$store/components/Layout.tsx";
 
 interface Props {
   children: Section;
 }
 
-function Gallery({ children: { Component, props } }: Props) {
+function Section({ children: { Component, props } }: Props) {
   return (
     <>
       <Component {...props} />
     </>
   );
 }
 
-export default Gallery;
+export function Preview(props: Props) {
+  return (
+    <LayoutContext.Provider value={{ isPreview: true }}>
+      <Section {...props} />
+    </LayoutContext.Provider>
+  );
+}
+
+export default Section;

sections/Layout/Container.tsx

@@ -1,11 +1,32 @@
 import { Section } from "deco/blocks/section.ts";
+import { LayoutContext, useLayoutContext } from "$store/components/Layout.tsx";
 
 interface Props {
   children?: Section;
 }
 
-function Container({ children }: Props) {
-  if (!children) return null;
+function Placeholder() {
+  return (
+    <div class="rounded h-48 grid place-content-center w-full bg-base-100 text-base-300 text-sm">
+      Content
+    </div>
+  );
+}
+
+function Section({ children }: Props) {
+  const { isPreview } = useLayoutContext();
+
+  if (isPreview && typeof children?.Component !== "function") {
+    return (
+      <div class="bg-primary bg-opacity-5 p-4">
+        <Section children={{ Component: Placeholder, props: {} }} />
+      </div>
+    );
+  }
+
+  if (!children) {
+    return null;
+  }
 
   return (
     <div class="container">
@@ -15,25 +36,11 @@ function Container({ children }: Props) {
 }
 
 export function Preview(props: Props) {
-  if (props.children) {
-    return <Container {...props} />;
-  }
-
   return (
-    <div class="bg-primary bg-opacity-5 p-4">
-      <Container
-        {...props}
-        children={{
-          Component: () => (
-            <div class="rounded h-48 grid place-content-center w-full bg-base-100 text-base-300 text-sm">
-              Content
-            </div>
-          ),
-          props: {},
-        }}
-      />
-    </div>
+    <LayoutContext.Provider value={{ isPreview: true }}>
+      <Section {...props} />
+    </LayoutContext.Provider>
   );
 }
 
-export default Container;
+export default Section;

sections/Layout/Flex.tsx

@@ -1,3 +1,4 @@
+import { LayoutContext, useLayoutContext } from "$store/components/Layout.tsx";
 import { clx } from "$store/sdk/clx.ts";
 import { Section } from "deco/blocks/section.ts";
 import { flex, VNode } from "../../constants.tsx";
@@ -33,6 +34,11 @@ interface Props {
 }
 
 function Section({ layout, children }: Props) {
+  const { isPreview } = useLayoutContext();
+  const items = isPreview && !children?.length
+    ? new Array(4).fill(0).map(() => <ItemPreview />)
+    : children;
+
   return (
     <div
       class={clx(
@@ -47,13 +53,19 @@ function Section({ layout, children }: Props) {
         flex.wrap.desktop[layout?.wrap?.desktop ?? "wrap"],
       )}
     >
-      {children?.length
-        ? children
-        : new Array(4).fill(0).map(() => <ItemPreview />)}
+      {items}
     </div>
   );
 }
 
+export function Preview(props: Props) {
+  return (
+    <LayoutContext.Provider value={{ isPreview: true }}>
+      <Section {...props} />
+    </LayoutContext.Provider>
+  );
+}
+
 const ItemPreview = () => (
   <div class="card w-48 h-48 bg-base-100 shadow">
     <div class="card-body items-center justify-center text-base-300 text-sm">

sections/Layout/Grid.tsx

@@ -1,6 +1,7 @@
 import { Section } from "deco/blocks/section.ts";
 import { grid, VNode } from "../../constants.tsx";
 import { clx } from "../../sdk/clx.ts";
+import { LayoutContext, useLayoutContext } from "$store/components/Layout.tsx";
 
 interface Props {
   children?: VNode[] | null;
@@ -65,6 +66,11 @@ interface Props {
 }
 
 function Section({ layout, children }: Props) {
+  const { isPreview } = useLayoutContext();
+  const items = isPreview && !children?.length
+    ? new Array(12).fill(0).map(() => <ItemPreview />)
+    : children;
+
   return (
     <div
       class={clx(
@@ -81,13 +87,19 @@ function Section({ layout, children }: Props) {
         grid.placeItems.desktop[layout?.placeItems?.desktop ?? "center"],
       )}
     >
-      {children?.length
-        ? children
-        : new Array(12).fill(0).map(() => <ItemPreview />)}
+      {items}
     </div>
   );
 }
 
+export function Preview(props: Props) {
+  return (
+    <LayoutContext.Provider value={{ isPreview: true }}>
+      <Section {...props} />
+    </LayoutContext.Provider>
+  );
+}
+
 const ItemPreview = () => (
   <div class="card w-48 h-48 bg-base-100 shadow">
     <div class="card-body items-center justify-center text-base-300 text-sm">