@morphika/andami 0.5.0 → 0.5.2

package/components/builder/CoverSectionCanvas.tsx

@@ -1,275 +1,363 @@
-"use client";
-
-import { useMemo, useState } from "react";
-import { useBuilderStore } from "../../lib/builder/store";
-import type { CoverSection, CoverRow, PageSectionV2 } from "../../lib/sanity/types";
-import type { DeviceViewport } from "../../lib/builder/types";
-import SectionV2Canvas from "./SectionV2Canvas";
-import CoverRowResizeHandle from "./CoverRowResizeHandle";
-import { DEVICE_HEIGHTS } from "../../lib/builder/types";
-import { adminAssetUrl } from "../../lib/assets";
-import { normalizeRowHeights } from "../../lib/builder/store-cover";
-
-/**
- * CoverSectionCanvas — renders a CoverSection in the builder canvas.
- *
- * Displays proportional rows (based on cover_rows height_percent) inside
- * a fixed-height container that simulates the section's vh height.
- * Each row contains a SectionV2Canvas (full V2 grid editor reuse) via
- * a virtual PageSectionV2 scoped to that row's columns.
- *
- * Background image/video is shown as a faint preview behind all rows.
- * Row resize handles are rendered between adjacent rows (Phase 5).
- *
- * Session 176: Cover Sections — Phase 4 (Builder Canvas).
- */
-
-interface CoverSectionCanvasProps {
-  section: CoverSection;
-  onAddBlockTarget: (sectionKey: string, colKey: string, insertIndex?: number) => void;
-}
-
-const COVER_ACCENT = "#0d9488";
-
-function getEffectiveCoverRows(section: CoverSection, viewport: DeviceViewport): CoverRow[] {
-  if (viewport === "desktop") return section.cover_rows;
-  const vp = viewport as "tablet" | "phone";
-  const overrides = section.responsive?.[vp]?.cover_rows;
-  if (!overrides || overrides.length === 0) return section.cover_rows;
-
-  // Partial overrides (only some rows have a tablet/phone value) produce a
-  // merged array whose sum is not necessarily 100 — desktop values for the
-  // non-overridden rows don't know about the tablet overrides. Normalize the
-  // final set so the CSS `grid-template-rows` stays valid.
-  const merged = section.cover_rows.map((row) => {
-    const override = overrides.find((o) => o._key === row._key);
-    if (override?.height_percent !== undefined) {
-      return { ...row, height_percent: override.height_percent };
-    }
-    return row;
-  });
-
-  const total = merged.reduce((acc, r) => acc + r.height_percent, 0);
-  if (Math.abs(total - 100) <= 0.5) return merged;
-
-  const normalized = normalizeRowHeights(merged.map((r) => r.height_percent));
-  return merged.map((r, i) => ({ ...r, height_percent: normalized[i] ?? r.height_percent }));
-}
-
-export default function CoverSectionCanvas({
-  section,
-  onAddBlockTarget,
-}: CoverSectionCanvasProps) {
-  const store = useBuilderStore();
-  const activeViewport = store.activeViewport || "desktop";
-  const previewMode = store.previewMode;
-  const [isSectionHovered, setIsSectionHovered] = useState(false);
-
-  const vhPixels = DEVICE_HEIGHTS[activeViewport];
-  const heightMultiplier = (parseInt(section.height || "100", 10) || 100) / 100;
-  const containerHeight = Math.round(vhPixels * heightMultiplier);
-
-  const bgImageUrl = section.background_type === "image" && section.background_image
-    ? adminAssetUrl(section.background_image)
-    : null;
-  const bgVideoUrl = section.background_type === "video" && section.background_video
-    ? adminAssetUrl(section.background_video)
-    : null;
-
-  const effectiveRows = useMemo(
-    () => getEffectiveCoverRows(section, activeViewport),
-    [section, activeViewport]
-  );
-
-  const virtualSectionsPerRow = useMemo(() => {
-    return effectiveRows.map((row, rowIndex) => {
-      const rowNumber = rowIndex + 1;
-      const rowColumns = section.columns
-        .filter((c) => c.grid_row === rowNumber)
-        .map((c) => ({ ...c, grid_row: 1 }));
-      const virtualSection: PageSectionV2 = {
-        _type: "pageSectionV2",
-        _key: section._key,
-        section_type: "empty-v2",
-        columns: rowColumns,
-        settings: {
-          preset: "custom",
-          grid_columns: section.settings.grid_columns || 12,
-          col_gap: section.settings.col_gap ?? 20,
-          row_gap: section.settings.row_gap ?? 20,
-        },
-      };
-      return { row, rowNumber, virtualSection };
-    });
-  }, [effectiveRows, section]);
-
-  return (
-    <div
-      className="relative"
-      style={{
-        borderRadius: 12,
-        border: `1.5px solid ${COVER_ACCENT}40`,
-        overflow: "visible",
-      }}
-      onMouseEnter={() => setIsSectionHovered(true)}
-      onMouseLeave={() => setIsSectionHovered(false)}
-    >
-      {/* Cover container — simulated viewport height. The previous top
-          header bar was removed; row settings now live in the section pill
-          (see SortableRow). */}
-      <div
-        className="relative"
-        style={{ height: containerHeight }}
-      >
-        {/* Background preview — image */}
-        {bgImageUrl && (
-          <div
-            className="absolute inset-0 bg-cover bg-center pointer-events-none"
-            style={{
-              backgroundImage: `url("${bgImageUrl}")`,
-              backgroundSize: section.background_size || "cover",
-              backgroundPosition: section.background_position || "center center",
-              opacity: 0.12,
-            }}
-          />
-        )}
-
-        {/* Background preview — video */}
-        {bgVideoUrl && (
-          <video
-            src={bgVideoUrl}
-            muted
-            playsInline
-            autoPlay
-            loop
-            className="absolute inset-0 w-full h-full object-cover pointer-events-none"
-            style={{ opacity: 0.12 }}
-          />
-        )}
-
-        {/* Background preview — solid color */}
-        {section.background_type === "color" && section.background_color && (
-          <div
-            className="absolute inset-0 pointer-events-none"
-            style={{ backgroundColor: section.background_color, opacity: 0.25 }}
-          />
-        )}
-
-        {/* Overlay preview */}
-        {(section.background_overlay_opacity ?? 0) > 0 && (
-          <div
-            className="absolute inset-0 pointer-events-none"
-            style={{
-              backgroundColor: section.background_overlay_color || "#000000",
-              opacity: (section.background_overlay_opacity || 0) / 100 * 0.3,
-              overflow: "hidden",
-            }}
-          />
-        )}
-
-        {/* Proportional rows.
-         *
-         * IMPORTANT — do NOT add `zIndex`, `isolate`, `transform`, `filter`,
-         * or any other property that establishes a new CSS stacking context
-         * on this wrapper. The column chrome (drag handle, delete button)
-         * inside each SectionV2Canvas/SortableColumn is absolutely positioned
-         * at z-[6] and must stack ABOVE the side pill (z-[5]) rendered by
-         * the parent SortableRow. If this wrapper creates a stacking context,
-         * the chrome gets trapped below the pill regardless of its local
-         * z-index — the whole subtree ends up at this wrapper's level in the
-         * parent stacking context.
-         *
-         * The rows visually stack above the absolute background/overlay divs
-         * naturally because they come LATER in the DOM and those bg divs
-         * don't have a positive z-index either.
-         *
-         * See `lib/builder/__tests__/section-visibility.test.ts` for the
-         * related nav-colour logic and this file's git history for the
-         * original bug (Session 178+: column chrome clipped in Cover).
-         */}
-        <div
-          className="relative flex flex-col h-full"
-        >
-          {virtualSectionsPerRow.map(({ row, rowNumber, virtualSection }, rowIndex) => {
-            const alignMap = { start: "flex-start", center: "center", end: "flex-end" };
-            const isLastRow = rowIndex === effectiveRows.length - 1;
-            const hasColumns = virtualSection.columns.length > 0;
-
-            return (
-              <div
-                key={row._key}
-                className="relative"
-                style={{
-                  height: `${row.height_percent}%`,
-                  minHeight: 0,
-                  display: "flex",
-                  flexDirection: "column",
-                  justifyContent: alignMap[row.vertical_align] || "flex-start",
-                }}
-              >
-                {hasColumns ? (
-                  /* V2 grid for this row's columns — overflow visible so the
-                     column chrome (drag handle, delete button) that translates
-                     outside column bounds doesn't get clipped. The public
-                     renderer still clips at the <section> level so overflowing
-                     content never leaves the cover on the live site. */
-                  <div className="flex-1 min-h-0 flex flex-col" style={{ overflow: "visible" }}>
-                    <SectionV2Canvas
-                      section={virtualSection}
-                      onAddBlockTarget={onAddBlockTarget}
-                      fillHeight
-                      gridRowOffset={rowNumber - 1}
-                    />
-                  </div>
-                ) : (
-                  /* Empty row: direct + Add Column button with correct gridRow */
-                  <div
-                    className="flex-1 min-h-0 flex items-center justify-center"
-                    style={{
-                      border: isSectionHovered ? `1.5px dashed ${COVER_ACCENT}30` : "1.5px dashed transparent",
-                      borderRadius: 6,
-                      margin: 4,
-                      transition: "border-color 150ms",
-                    }}
-                  >
-                    <button
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        store.addColumnV2(section._key, rowNumber, 1, section.settings.grid_columns || 12);
-                      }}
-                      className="rounded-full text-[10px] font-medium transition-all hover:scale-105"
-                      style={{
-                        padding: "5px 16px",
-                        background: `rgba(71, 148, 226, 0.10)`,
-                        color: "#4794e2",
-                        border: "1px dashed rgba(71, 148, 226, 0.4)",
-                        opacity: isSectionHovered ? 1 : 0,
-                        pointerEvents: isSectionHovered ? "auto" : "none",
-                        transition: "opacity 150ms",
-                      }}
-                    >
-                      + Add Column
-                    </button>
-                  </div>
-                )}
-
-                {/* Resize handle between this row and the next */}
-                {!isLastRow && (
-                  <CoverRowResizeHandle
-                    sectionKey={section._key}
-                    handleIndex={rowIndex}
-                    abovePercent={row.height_percent}
-                    belowPercent={effectiveRows[rowIndex + 1]?.height_percent ?? 0}
-                    containerHeight={containerHeight}
-                    isSectionHovered={isSectionHovered}
-                  />
-                )}
-              </div>
-            );
-          })}
-
-        </div>
-      </div>
-    </div>
-  );
-}
+"use client";
+
+import { useCallback, useMemo, useState } from "react";
+import { useBuilderStore } from "../../lib/builder/store";
+import type { CoverSection, CoverRow, PageSectionV2, ColumnOverride } from "../../lib/sanity/types";
+import type { DeviceViewport } from "../../lib/builder/types";
+import SectionV2Canvas from "./SectionV2Canvas";
+import CoverRowResizeHandle from "./CoverRowResizeHandle";
+import { DEVICE_HEIGHTS } from "../../lib/builder/types";
+import { adminAssetUrl } from "../../lib/assets";
+import { normalizeRowHeights } from "../../lib/builder/store-cover";
+
+/**
+ * CoverSectionCanvas — renders a CoverSection in the builder canvas.
+ *
+ * Displays proportional rows (based on cover_rows height_percent) inside
+ * a fixed-height container that simulates the section's vh height.
+ * Each row contains a SectionV2Canvas (full V2 grid editor reuse) via
+ * a virtual PageSectionV2 scoped to that row's columns.
+ *
+ * Background image/video is shown as a faint preview behind all rows.
+ * Row resize handles are rendered between adjacent rows (Phase 5).
+ *
+ * Session 176: Cover Sections — Phase 4 (Builder Canvas).
+ */
+
+interface CoverSectionCanvasProps {
+  section: CoverSection;
+  onAddBlockTarget: (sectionKey: string, colKey: string, insertIndex?: number) => void;
+}
+
+const COVER_ACCENT = "#0d9488";
+
+function getEffectiveCoverRows(section: CoverSection, viewport: DeviceViewport): CoverRow[] {
+  if (viewport === "desktop") return section.cover_rows;
+  const vp = viewport as "tablet" | "phone";
+  const overrides = section.responsive?.[vp]?.cover_rows;
+  if (!overrides || overrides.length === 0) return section.cover_rows;
+
+  // Partial overrides (only some rows have a tablet/phone value) produce a
+  // merged array whose sum is not necessarily 100 — desktop values for the
+  // non-overridden rows don't know about the tablet overrides. Normalize the
+  // final set so the CSS `grid-template-rows` stays valid.
+  const merged = section.cover_rows.map((row) => {
+    const override = overrides.find((o) => o._key === row._key);
+    if (override?.height_percent !== undefined) {
+      return { ...row, height_percent: override.height_percent };
+    }
+    return row;
+  });
+
+  const total = merged.reduce((acc, r) => acc + r.height_percent, 0);
+  if (Math.abs(total - 100) <= 0.5) return merged;
+
+  const normalized = normalizeRowHeights(merged.map((r) => r.height_percent));
+  return merged.map((r, i) => ({ ...r, height_percent: normalized[i] ?? r.height_percent }));
+}
+
+export default function CoverSectionCanvas({
+  section,
+  onAddBlockTarget,
+}: CoverSectionCanvasProps) {
+  const store = useBuilderStore();
+  const activeViewport = store.activeViewport || "desktop";
+  const previewMode = store.previewMode;
+  const [isSectionHovered, setIsSectionHovered] = useState(false);
+
+  const vhPixels = DEVICE_HEIGHTS[activeViewport];
+  const heightMultiplier = (parseInt(section.height || "100", 10) || 100) / 100;
+  const containerHeight = Math.round(vhPixels * heightMultiplier);
+
+  const bgImageUrl = section.background_type === "image" && section.background_image
+    ? adminAssetUrl(section.background_image)
+    : null;
+  const bgVideoUrl = section.background_type === "video" && section.background_video
+    ? adminAssetUrl(section.background_video)
+    : null;
+
+  const effectiveRows = useMemo(
+    () => getEffectiveCoverRows(section, activeViewport),
+    [section, activeViewport]
+  );
+
+  const virtualSectionsPerRow = useMemo(() => {
+    return effectiveRows.map((row, rowIndex) => {
+      const rowNumber = rowIndex + 1;
+      const rowColumnKeys = new Set(
+        section.columns.filter((c) => c.grid_row === rowNumber).map((c) => c._key),
+      );
+      const rowColumns = section.columns
+        .filter((c) => c.grid_row === rowNumber)
+        .map((c) => ({ ...c, grid_row: 1 }));
+
+      // Project the Cover's responsive overrides into this row's virtual section.
+      // Only keep column overrides whose `_key` belongs to this row, and remap their
+      // `grid_row` from the Cover's actual row number back to 1 (the virtual row).
+      // Without this, SectionV2Canvas calls `getEffectiveColumnsV2` against the virtual
+      // section and never sees the overrides — tablet/phone view falls back to the
+      // desktop layout even when overrides exist.
+      const projectOverridesForRow = (
+        overrides: ColumnOverride[] | undefined,
+      ): ColumnOverride[] | undefined => {
+        if (!overrides) return undefined;
+        const filtered = overrides
+          .filter((o) => rowColumnKeys.has(o._key))
+          .map((o) =>
+            o.grid_row !== undefined ? { ...o, grid_row: 1 } : o,
+          );
+        return filtered.length ? filtered : undefined;
+      };
+
+      const virtualResponsive: PageSectionV2["responsive"] = {};
+      const tabletCols = projectOverridesForRow(section.responsive?.tablet?.columns);
+      const phoneCols = projectOverridesForRow(section.responsive?.phone?.columns);
+      if (tabletCols) virtualResponsive.tablet = { columns: tabletCols };
+      if (phoneCols) virtualResponsive.phone = { columns: phoneCols };
+
+      const virtualSection: PageSectionV2 = {
+        _type: "pageSectionV2",
+        _key: section._key,
+        section_type: "empty-v2",
+        columns: rowColumns,
+        settings: {
+          preset: "custom",
+          grid_columns: section.settings.grid_columns || 12,
+          col_gap: section.settings.col_gap ?? 20,
+          row_gap: section.settings.row_gap ?? 20,
+        },
+        ...(Object.keys(virtualResponsive).length > 0
+          ? { responsive: virtualResponsive }
+          : {}),
+      };
+      return { row, rowNumber, virtualSection };
+    });
+  }, [effectiveRows, section]);
+
+  // Custom responsive updater for virtual per-row sections. Takes the responsive
+  // object that SectionV2Canvas built (with `grid_row: 1` for this row's columns
+  // and keys limited to this row) and merges it back into the Cover's flat
+  // column override list: remaps `grid_row: 1` back to `rowNumber`, preserves
+  // overrides for other rows, and preserves `cover_rows` + `settings` at the
+  // responsive level which are invisible to SectionV2Canvas.
+  const handleVirtualRowResponsiveUpdate = useCallback(
+    (rowNumber: number) =>
+      (_sectionKey: string, incoming: PageSectionV2["responsive"]): void => {
+        const rowColumnKeys = new Set(
+          section.columns.filter((c) => c.grid_row === rowNumber).map((c) => c._key),
+        );
+
+        const merged: CoverSection["responsive"] = {};
+
+        (["tablet", "phone"] as const).forEach((vp) => {
+          const existingVp = section.responsive?.[vp];
+          const incomingVp = incoming?.[vp];
+
+          // Columns for OTHER rows from the Cover's existing responsive stay as-is.
+          const otherRowOverrides = (existingVp?.columns || []).filter(
+            (o) => !rowColumnKeys.has(o._key),
+          );
+
+          // Columns for THIS row come from the incoming virtual-section responsive,
+          // with grid_row remapped 1 → rowNumber.
+          const thisRowOverrides = (incomingVp?.columns || []).map((o) =>
+            o.grid_row !== undefined ? { ...o, grid_row: rowNumber } : o,
+          );
+
+          const mergedCols = [...otherRowOverrides, ...thisRowOverrides];
+
+          const vpOverride: NonNullable<CoverSection["responsive"]>[typeof vp] = {};
+          if (mergedCols.length > 0) vpOverride.columns = mergedCols;
+          // Preserve cover_rows + settings that the virtual section never sees.
+          if (existingVp?.cover_rows) vpOverride.cover_rows = existingVp.cover_rows;
+          if (existingVp?.settings) vpOverride.settings = existingVp.settings;
+
+          if (Object.keys(vpOverride).length > 0) {
+            merged[vp] = vpOverride;
+          }
+        });
+
+        const finalResponsive = Object.keys(merged).length > 0 ? merged : undefined;
+        // CoverSection and PageSectionV2 share the same `updateSectionV2Responsive`
+        // store action (it writes to any section by _key); the runtime shapes align
+        // on `{ tablet?, phone? }` — the extra `cover_rows` field on CoverSection
+        // is carried through without touching the V2-shaped write path.
+        store.updateSectionV2Responsive(
+          section._key,
+          finalResponsive as PageSectionV2["responsive"],
+        );
+      },
+    [section, store],
+  );
+
+  return (
+    <div
+      className="relative"
+      style={{
+        borderRadius: 12,
+        border: `1.5px solid ${COVER_ACCENT}40`,
+        overflow: "visible",
+      }}
+      onMouseEnter={() => setIsSectionHovered(true)}
+      onMouseLeave={() => setIsSectionHovered(false)}
+    >
+      {/* Cover container — simulated viewport height. The previous top
+          header bar was removed; row settings now live in the section pill
+          (see SortableRow). */}
+      <div
+        className="relative"
+        style={{ height: containerHeight }}
+      >
+        {/* Background preview — image */}
+        {bgImageUrl && (
+          <div
+            className="absolute inset-0 bg-cover bg-center pointer-events-none"
+            style={{
+              backgroundImage: `url("${bgImageUrl}")`,
+              backgroundSize: section.background_size || "cover",
+              backgroundPosition: section.background_position || "center center",
+              opacity: 0.12,
+            }}
+          />
+        )}
+
+        {/* Background preview — video */}
+        {bgVideoUrl && (
+          <video
+            src={bgVideoUrl}
+            muted
+            playsInline
+            autoPlay
+            loop
+            className="absolute inset-0 w-full h-full object-cover pointer-events-none"
+            style={{ opacity: 0.12 }}
+          />
+        )}
+
+        {/* Background preview — solid color */}
+        {section.background_type === "color" && section.background_color && (
+          <div
+            className="absolute inset-0 pointer-events-none"
+            style={{ backgroundColor: section.background_color, opacity: 0.25 }}
+          />
+        )}
+
+        {/* Overlay preview */}
+        {(section.background_overlay_opacity ?? 0) > 0 && (
+          <div
+            className="absolute inset-0 pointer-events-none"
+            style={{
+              backgroundColor: section.background_overlay_color || "#000000",
+              opacity: (section.background_overlay_opacity || 0) / 100 * 0.3,
+              overflow: "hidden",
+            }}
+          />
+        )}
+
+        {/* Proportional rows.
+         *
+         * IMPORTANT — do NOT add `zIndex`, `isolate`, `transform`, `filter`,
+         * or any other property that establishes a new CSS stacking context
+         * on this wrapper. The column chrome (drag handle, delete button)
+         * inside each SectionV2Canvas/SortableColumn is absolutely positioned
+         * at z-[6] and must stack ABOVE the side pill (z-[5]) rendered by
+         * the parent SortableRow. If this wrapper creates a stacking context,
+         * the chrome gets trapped below the pill regardless of its local
+         * z-index — the whole subtree ends up at this wrapper's level in the
+         * parent stacking context.
+         *
+         * The rows visually stack above the absolute background/overlay divs
+         * naturally because they come LATER in the DOM and those bg divs
+         * don't have a positive z-index either.
+         *
+         * See `lib/builder/__tests__/section-visibility.test.ts` for the
+         * related nav-colour logic and this file's git history for the
+         * original bug (Session 178+: column chrome clipped in Cover).
+         */}
+        <div
+          className="relative flex flex-col h-full"
+        >
+          {virtualSectionsPerRow.map(({ row, rowNumber, virtualSection }, rowIndex) => {
+            const alignMap = { start: "flex-start", center: "center", end: "flex-end" };
+            const isLastRow = rowIndex === effectiveRows.length - 1;
+            const hasColumns = virtualSection.columns.length > 0;
+
+            return (
+              <div
+                key={row._key}
+                className="relative"
+                style={{
+                  height: `${row.height_percent}%`,
+                  minHeight: 0,
+                  display: "flex",
+                  flexDirection: "column",
+                  justifyContent: alignMap[row.vertical_align] || "flex-start",
+                }}
+              >
+                {hasColumns ? (
+                  /* V2 grid for this row's columns — overflow visible so the
+                     column chrome (drag handle, delete button) that translates
+                     outside column bounds doesn't get clipped. The public
+                     renderer still clips at the <section> level so overflowing
+                     content never leaves the cover on the live site. */
+                  <div className="flex-1 min-h-0 flex flex-col" style={{ overflow: "visible" }}>
+                    <SectionV2Canvas
+                      section={virtualSection}
+                      onAddBlockTarget={onAddBlockTarget}
+                      fillHeight
+                      gridRowOffset={rowNumber - 1}
+                      onUpdateResponsive={handleVirtualRowResponsiveUpdate(rowNumber)}
+                    />
+                  </div>
+                ) : (
+                  /* Empty row: direct + Add Column button with correct gridRow */
+                  <div
+                    className="flex-1 min-h-0 flex items-center justify-center"
+                    style={{
+                      border: isSectionHovered ? `1.5px dashed ${COVER_ACCENT}30` : "1.5px dashed transparent",
+                      borderRadius: 6,
+                      margin: 4,
+                      transition: "border-color 150ms",
+                    }}
+                  >
+                    <button
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        store.addColumnV2(section._key, rowNumber, 1, section.settings.grid_columns || 12);
+                      }}
+                      className="rounded-full text-[10px] font-medium transition-all hover:scale-105"
+                      style={{
+                        padding: "5px 16px",
+                        background: `rgba(53, 128, 249, 0.10)`,
+                        color: "#3580f9",
+                        border: "1.5px dashed rgba(53, 128, 249, 0.4)",
+                        opacity: isSectionHovered ? 1 : 0,
+                        pointerEvents: isSectionHovered ? "auto" : "none",
+                        transition: "opacity 150ms",
+                      }}
+                    >
+                      + Add Column
+                    </button>
+                  </div>
+                )}
+
+                {/* Resize handle between this row and the next */}
+                {!isLastRow && (
+                  <CoverRowResizeHandle
+                    sectionKey={section._key}
+                    handleIndex={rowIndex}
+                    abovePercent={row.height_percent}
+                    belowPercent={effectiveRows[rowIndex + 1]?.height_percent ?? 0}
+                    containerHeight={containerHeight}
+                    isSectionHovered={isSectionHovered}
+                  />
+                )}
+              </div>
+            );
+          })}
+
+        </div>
+      </div>
+    </div>
+  );
+}