@neowhale/storefront 0.2.39 → 0.2.40

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -556,7 +556,24 @@ var WhaleStorefront = (function (exports) {
556
556
  function GallerySection({ section, theme }) {
557
557
  const { images } = section.content;
558
558
  const columns = section.config?.columns || 3;
559
+ const layout = section.config?.layout || "grid";
559
560
  if (!images || images.length === 0) return null;
561
+ if (layout === "collage") {
562
+ return /* @__PURE__ */ jsx("div", { style: { padding: "0.375rem", maxWidth: 900, margin: "0 auto" }, children: /* @__PURE__ */ jsx("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: "0.375rem" }, children: images.map((img, i) => /* @__PURE__ */ jsx("div", { style: {
563
+ gridColumn: i === 0 ? "1 / -1" : void 0,
564
+ aspectRatio: i === 0 ? "16/9" : i % 3 === 0 ? "3/4" : "1",
565
+ overflow: "hidden",
566
+ background: theme.surface
567
+ }, children: /* @__PURE__ */ jsx(
568
+ "img",
569
+ {
570
+ src: img.url,
571
+ alt: img.alt || "",
572
+ loading: i < 2 ? "eager" : "lazy",
573
+ style: { width: "100%", height: "100%", objectFit: "cover", display: "block" }
574
+ }
575
+ ) }, i)) }) });
576
+ }
560
577
  return /* @__PURE__ */ jsx("div", { style: { padding: "1.5rem", maxWidth: 800, margin: "0 auto" }, children: /* @__PURE__ */ jsx("div", { style: { display: "grid", gridTemplateColumns: `repeat(${columns}, 1fr)`, gap: "0.5rem" }, children: images.map((img, i) => /* @__PURE__ */ jsx("div", { style: { aspectRatio: "1", overflow: "hidden", background: theme.surface }, children: /* @__PURE__ */ jsx("img", { src: img.url, alt: img.alt || "", style: { width: "100%", height: "100%", objectFit: "cover", display: "block" } }) }, i)) }) });
561
578
  }
562
579
  function SocialLinksSection({ section, theme }) {
@@ -2300,7 +2300,24 @@ function VideoSection({ section, theme }) {
2300
2300
  function GallerySection({ section, theme }) {
2301
2301
  const { images } = section.content;
2302
2302
  const columns = section.config?.columns || 3;
2303
+ const layout = section.config?.layout || "grid";
2303
2304
  if (!images || images.length === 0) return null;
2305
+ if (layout === "collage") {
2306
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: "0.375rem", maxWidth: 900, margin: "0 auto" }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: "0.375rem" }, children: images.map((img, i) => /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
2307
+ gridColumn: i === 0 ? "1 / -1" : void 0,
2308
+ aspectRatio: i === 0 ? "16/9" : i % 3 === 0 ? "3/4" : "1",
2309
+ overflow: "hidden",
2310
+ background: theme.surface
2311
+ }, children: /* @__PURE__ */ jsxRuntime.jsx(
2312
+ "img",
2313
+ {
2314
+ src: img.url,
2315
+ alt: img.alt || "",
2316
+ loading: i < 2 ? "eager" : "lazy",
2317
+ style: { width: "100%", height: "100%", objectFit: "cover", display: "block" }
2318
+ }
2319
+ ) }, i)) }) });
2320
+ }
2304
2321
  return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: "1.5rem", maxWidth: 800, margin: "0 auto" }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "grid", gridTemplateColumns: `repeat(${columns}, 1fr)`, gap: "0.5rem" }, children: images.map((img, i) => /* @__PURE__ */ jsxRuntime.jsx("div", { style: { aspectRatio: "1", overflow: "hidden", background: theme.surface }, children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: img.url, alt: img.alt || "", style: { width: "100%", height: "100%", objectFit: "cover", display: "block" } }) }, i)) }) });
2305
2322
  }
2306
2323
  function SocialLinksSection({ section, theme }) {