blocks-dusted 0.1.0 → 0.1.2

package/templates/blocks/DD-ShowcaseGrid/Component.tsx

@@ -1,317 +1,307 @@
-"use client";
-
-import Image from "next/image";
-import React, { useEffect, useMemo, useRef, useState } from "react";
-import { cn } from "@/utilities/ui";
-type Media = { url?: string | null; alt?: string | null; [key: string]: any };
-
-export type DDShowcaseGridProps = Record<string, any> & {
-  stickToTop?: boolean | null;
-  fadeOutOnScroll?: boolean | null;
-};
-
-type ColumnImage = {
-  image?: Media | string | null;
-  imageUrl?: string | null;
-  [key: string]: any;
-};
-
-type ShowcaseColumn = {
-  id?: string | null;
-  images?: ColumnImage[] | null;
-  speed?: number | null;
-  initialOffset?: number | null;
-};
-
-interface ScrollColumnProps {
-  images: ColumnImage[];
-  speed: number;
-  initialOffset: number;
-  priority?: boolean;
-}
-
-function isLocalImageSrc(src?: string | null): src is string {
-  return typeof src === "string" && src.startsWith("/api/media/file/");
-}
-
-function ScrollColumn({
-  images,
-  speed,
-  initialOffset,
-  priority = false,
-}: ScrollColumnProps) {
-  const colRef = useRef<HTMLDivElement>(null);
-  const posRef = useRef(initialOffset);
-  const rafRef = useRef<number | null>(null);
-  const [mounted, setMounted] = useState(false);
-
-  const resolveSrc = (item: ColumnImage): string | null => {
-    if (item.image && typeof item.image === "object") {
-      const media = item.image as Media;
-      const url = media.url;
-
-      if (!url) return isLocalImageSrc(item.imageUrl) ? item.imageUrl : null;
-
-      return isLocalImageSrc(url) ? url : null;
-    }
-
-    return isLocalImageSrc(item.imageUrl) ? item.imageUrl : null;
-  };
-
-  const validImages = useMemo(() => {
-    return (images ?? []).filter((item) => resolveSrc(item) !== null);
-  }, [images]);
-
-  useEffect(() => {
-    setMounted(true);
-  }, []);
-
-  useEffect(() => {
-    if (!mounted) return;
-
-    const el = colRef.current;
-    if (!el) return;
-
-    const animate = () => {
-      posRef.current -= speed;
-
-      const totalHeight = el.scrollHeight / 2;
-
-      if (totalHeight > 0 && Math.abs(posRef.current) >= totalHeight) {
-        posRef.current = 0;
-      }
-
-      el.style.transform = `translateY(${posRef.current}px)`;
-      rafRef.current = requestAnimationFrame(animate);
-    };
-
-    const timer = window.setTimeout(() => {
-      rafRef.current = requestAnimationFrame(animate);
-    }, 1200);
-
-    return () => {
-      window.clearTimeout(timer);
-
-      if (rafRef.current) {
-        cancelAnimationFrame(rafRef.current);
-        rafRef.current = null;
-      }
-    };
-  }, [mounted, speed]);
-
-  if (validImages.length === 0) return null;
-
-  const renderImages = mounted ? [...validImages, ...validImages] : validImages;
-
-  return (
-    <div className="flex flex-col gap-4 will-change-transform" ref={colRef}>
-      {renderImages.map((item, i) => {
-        const src = resolveSrc(item);
-        if (!src) return null;
-
-        const isClone = i >= validImages.length;
-        const shouldPrioritize = Boolean(priority) && !isClone;
-
-        return (
-          <div
-            key={`${item.id ?? "image"}-${i}`}
-            className="relative aspect-4/3 w-full shrink-0 overflow-hidden rounded-lg border border-white/6"
-          >
-            <Image
-              src={src}
-              alt={item.alt ?? ""}
-              fill
-              sizes="(max-width: 640px) 50vw, (max-width: 1024px) 33vw, 25vw"
-              className="object-cover object-top"
-              priority={shouldPrioritize}
-              loading="eager"
-              // loading={shouldPrioritize ? 'eager' : 'lazy'}
-              fetchPriority={shouldPrioritize ? "high" : "auto"}
-            />
-          </div>
-        );
-      })}
-    </div>
-  );
-}
-
-export const DDShowcaseGrid: React.FC<DDShowcaseGridProps> = ({
-  columns,
-  height = 520,
-  columnHeight = 3200,
-  sectionId,
-  customCSS,
-  priority = false,
-  stickToTop = false,
-  fadeOutOnScroll = false,
-}) => {
-  const sectionHeight = height ?? 520;
-  const colHeight = columnHeight ?? 3200;
-  const shouldStick = Boolean(stickToTop);
-  const shouldFade = Boolean(fadeOutOnScroll);
-  const columnItems = (columns ?? []) as ShowcaseColumn[];
-  const wrapperRef = useRef<HTMLDivElement | null>(null);
-  const stickyRef = useRef<HTMLDivElement | null>(null);
-  const fadeDistance = Math.max(1, sectionHeight);
-
-  useEffect(() => {
-    if (!shouldFade) {
-      if (stickyRef.current) stickyRef.current.style.opacity = "1";
-      return;
-    }
-
-    let rafId = 0;
-
-    const updateOpacity = () => {
-      if (rafId) window.cancelAnimationFrame(rafId);
-
-      rafId = window.requestAnimationFrame(() => {
-        const wrapper = wrapperRef.current;
-        const sticky = stickyRef.current;
-
-        if (!wrapper || !sticky) return;
-
-        const rect = wrapper.getBoundingClientRect();
-        const progress = Math.min(1, Math.max(0, -rect.top / fadeDistance));
-
-        sticky.style.opacity = String(1 - progress);
-      });
-    };
-
-    updateOpacity();
-
-    window.addEventListener("scroll", updateOpacity, { passive: true });
-    window.addEventListener("resize", updateOpacity);
-    window.addEventListener("locomotive:scroll", updateOpacity);
-    window.addEventListener("locomotive:resize", updateOpacity);
-
-    return () => {
-      window.removeEventListener("scroll", updateOpacity);
-      window.removeEventListener("resize", updateOpacity);
-      window.removeEventListener("locomotive:scroll", updateOpacity);
-      window.removeEventListener("locomotive:resize", updateOpacity);
-
-      if (rafId) {
-        window.cancelAnimationFrame(rafId);
-      }
-    };
-  }, [fadeDistance, shouldFade]);
-
-  return (
-    <>
-      <style>{`
-        .studio-showcase-grid {
-          --sg-perspective: 900px;
-          --sg-perspective-origin: 50% 40%;
-          --sg-transform: rotateX(52deg) rotateZ(-42deg);
-          --sg-top: -160%;
-          --sg-bottom: -90%;
-          --sg-sides: -30%;
-        }
-
-        @media (max-width: 1023px) {
-          .studio-showcase-grid {
-          --sg-perspective-origin: 50% 40%;
-          --sg-transform: rotateX(52deg) rotateZ(-42deg);
-          --sg-top: -90%;
-          --sg-bottom: -30%;
-          --sg-sides: -50%;
-            max-height: 420px;
-          }
-        }
-
-        @media (max-width: 639px) {
-          .studio-showcase-grid {
-          --sg-perspective-origin: 50% 40%;
-          --sg-transform: rotateX(52deg) rotateZ(-42deg);
-          --sg-top: -60%;
-          --sg-bottom: 0%;
-          --sg-sides: -90%;
-            max-height: 300px;
-          }
-        }
-      `}</style>
-
-      {customCSS && <style dangerouslySetInnerHTML={{ __html: customCSS }} />}
-
-      <div
-        data-content-type="ddShowcaseGrid"
-        ref={wrapperRef}
-        className={cn(
-          "relative overflow-clip",
-          shouldStick || shouldFade ? "z-0" : "",
-        )}
-        style={{
-          height:
-            shouldStick || shouldFade
-              ? `${sectionHeight + fadeDistance}px`
-              : undefined,
-        }}
-      >
-        <div
-          ref={stickyRef}
-          className={cn(
-            "relative will-change-opacity",
-            shouldStick || shouldFade ? "sticky top-0" : "",
-          )}
-        >
-          <div className="pointer-events-none absolute left-0 right-0 top-0 bottom-0 z-10 h-[150vh] bg-[linear-gradient(0deg,#ffffff,#ffffff,#ffffff,#ffffff,transparent)] dark:bg-[linear-gradient(0deg,#0a0a0a,#0a0a0a,#0a0a0a,#0a0a0a,transparent)] opacity-80 mix-blend-color-dodge" />
-          <div
-            id={sectionId ?? undefined}
-            className="studio-showcase-grid relative z-0! overflow-hidden"
-            style={{ height: `${sectionHeight}px` }}
-          >
-            <div className="pointer-events-none absolute inset-x-0 top-0 z-10 h-80 bg-linear-to-b from-white to-transparent dark:from-[#0a0a0a]" />
-            <div className="pointer-events-none absolute inset-x-0 bottom-0 z-10 h-80 bg-linear-to-t from-white to-transparent dark:from-[#0a0a0a]" />
-            <div className="pointer-events-none absolute inset-y-0 left-0 z-10 w-40 bg-linear-to-r from-white to-transparent dark:from-[#0a0a0a]" />
-            <div className="pointer-events-none absolute inset-y-0 right-0 z-10 w-40 bg-linear-to-l from-white to-transparent dark:from-[#0a0a0a]" />
-
-            <div
-              className="absolute inset-0"
-              style={{
-                perspective: "var(--sg-perspective)",
-                perspectiveOrigin: "var(--sg-perspective-origin)",
-              }}
-            >
-              <div
-                style={{
-                  transform: "var(--sg-transform)",
-                  transformOrigin: "center center",
-                  position: "absolute",
-                  top: "var(--sg-top)",
-                  left: "var(--sg-sides)",
-                  right: "var(--sg-sides)",
-                  bottom: "var(--sg-bottom)",
-                  display: "flex",
-                  gap: "16px",
-                  alignItems: "flex-start",
-                }}
-              >
-                {columnItems.map((col, colIndex) => (
-                  <div
-                    key={col.id ?? colIndex}
-                    className="studio-showcase-col"
-                    style={{
-                      flex: "1",
-                      overflow: "hidden",
-                      height: `${colHeight}px`,
-                    }}
-                  >
-                    <ScrollColumn
-                      images={col.images ?? []}
-                      speed={col.speed ?? 0.5}
-                      initialOffset={col.initialOffset ?? 0}
-                      priority={Boolean(priority)}
-                    />
-                  </div>
-                ))}
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </>
-  );
-};
-
-export default DDShowcaseGrid;
+'use client'
+
+import Image from 'next/image'
+import React, { useEffect, useMemo, useRef, useState } from 'react'
+import { cn } from '@/utilities/ui'
+type Media = { url?: string | null; alt?: string | null; [key: string]: any }
+
+export type DDShowcaseGridProps = Record<string, any> & {
+  stickToTop?: boolean | null
+  fadeOutOnScroll?: boolean | null
+}
+
+type ColumnImage = {
+  image?: Media | string | null
+  imageUrl?: string | null
+  [key: string]: any
+}
+
+type ShowcaseColumn = {
+  id?: string | null
+  images?: ColumnImage[] | null
+  speed?: number | null
+  initialOffset?: number | null
+}
+
+interface ScrollColumnProps {
+  images: ColumnImage[]
+  speed: number
+  initialOffset: number
+  priority?: boolean
+}
+
+function isLocalImageSrc(src?: string | null): src is string {
+  return typeof src === 'string' && src.startsWith('/api/media/file/')
+}
+
+function ScrollColumn({ images, speed, initialOffset, priority = false }: ScrollColumnProps) {
+  const colRef = useRef<HTMLDivElement>(null)
+  const posRef = useRef(initialOffset)
+  const rafRef = useRef<number | null>(null)
+  const [mounted, setMounted] = useState(false)
+
+  const resolveSrc = (item: ColumnImage): string | null => {
+    if (item.image && typeof item.image === 'object') {
+      const media = item.image as Media
+      const url = media.url
+
+      if (!url) return isLocalImageSrc(item.imageUrl) ? item.imageUrl : null
+
+      return isLocalImageSrc(url) ? url : null
+    }
+
+    return isLocalImageSrc(item.imageUrl) ? item.imageUrl : null
+  }
+
+  const validImages = useMemo(() => {
+    return (images ?? []).filter((item) => resolveSrc(item) !== null)
+  }, [images])
+
+  useEffect(() => {
+    setMounted(true)
+  }, [])
+
+  useEffect(() => {
+    if (!mounted) return
+
+    const el = colRef.current
+    if (!el) return
+
+    const animate = () => {
+      posRef.current -= speed
+
+      const totalHeight = el.scrollHeight / 2
+
+      if (totalHeight > 0 && Math.abs(posRef.current) >= totalHeight) {
+        posRef.current = 0
+      }
+
+      el.style.transform = `translateY(${posRef.current}px)`
+      rafRef.current = requestAnimationFrame(animate)
+    }
+
+    const timer = window.setTimeout(() => {
+      rafRef.current = requestAnimationFrame(animate)
+    }, 1200)
+
+    return () => {
+      window.clearTimeout(timer)
+
+      if (rafRef.current) {
+        cancelAnimationFrame(rafRef.current)
+        rafRef.current = null
+      }
+    }
+  }, [mounted, speed])
+
+  if (validImages.length === 0) return null
+
+  const renderImages = mounted ? [...validImages, ...validImages] : validImages
+
+  return (
+    <div className="flex flex-col gap-4 will-change-transform" ref={colRef}>
+      {renderImages.map((item, i) => {
+        const src = resolveSrc(item)
+        if (!src) return null
+
+        const isClone = i >= validImages.length
+        const shouldPrioritize = Boolean(priority) && !isClone
+
+        return (
+          <div
+            key={`${item.id ?? 'image'}-${i}`}
+            className="relative aspect-4/3 w-full shrink-0 overflow-hidden rounded-lg border border-white/6"
+          >
+            <Image
+              src={src}
+              alt={item.alt ?? ''}
+              fill
+              sizes="(max-width: 640px) 50vw, (max-width: 1024px) 33vw, 25vw"
+              className="object-cover object-top"
+              priority={shouldPrioritize}
+              loading="eager"
+              // loading={shouldPrioritize ? 'eager' : 'lazy'}
+              fetchPriority={shouldPrioritize ? 'high' : 'auto'}
+            />
+          </div>
+        )
+      })}
+    </div>
+  )
+}
+
+export const DDShowcaseGrid: React.FC<DDShowcaseGridProps> = ({
+  columns,
+  height = 520,
+  columnHeight = 3200,
+  sectionId,
+  customCSS,
+  priority = false,
+  stickToTop = false,
+  fadeOutOnScroll = false,
+}) => {
+  const sectionHeight = height ?? 520
+  const colHeight = columnHeight ?? 3200
+  const shouldStick = Boolean(stickToTop)
+  const shouldFade = Boolean(fadeOutOnScroll)
+  const columnItems = (columns ?? []) as ShowcaseColumn[]
+  const wrapperRef = useRef<HTMLDivElement | null>(null)
+  const stickyRef = useRef<HTMLDivElement | null>(null)
+  const fadeDistance = Math.max(1, sectionHeight)
+
+  useEffect(() => {
+    if (!shouldFade) {
+      if (stickyRef.current) stickyRef.current.style.opacity = '1'
+      return
+    }
+
+    let rafId = 0
+
+    const updateOpacity = () => {
+      if (rafId) window.cancelAnimationFrame(rafId)
+
+      rafId = window.requestAnimationFrame(() => {
+        const wrapper = wrapperRef.current
+        const sticky = stickyRef.current
+
+        if (!wrapper || !sticky) return
+
+        const rect = wrapper.getBoundingClientRect()
+        const progress = Math.min(1, Math.max(0, -rect.top / fadeDistance))
+
+        sticky.style.opacity = String(1 - progress)
+      })
+    }
+
+    updateOpacity()
+
+    window.addEventListener('scroll', updateOpacity, { passive: true })
+    window.addEventListener('resize', updateOpacity)
+    window.addEventListener('locomotive:scroll', updateOpacity)
+    window.addEventListener('locomotive:resize', updateOpacity)
+
+    return () => {
+      window.removeEventListener('scroll', updateOpacity)
+      window.removeEventListener('resize', updateOpacity)
+      window.removeEventListener('locomotive:scroll', updateOpacity)
+      window.removeEventListener('locomotive:resize', updateOpacity)
+
+      if (rafId) {
+        window.cancelAnimationFrame(rafId)
+      }
+    }
+  }, [fadeDistance, shouldFade])
+
+  return (
+    <>
+      <style>{`
+        .studio-showcase-grid {
+          --sg-perspective: 900px;
+          --sg-perspective-origin: 50% 40%;
+          --sg-transform: rotateX(52deg) rotateZ(-42deg);
+          --sg-top: -160%;
+          --sg-bottom: -90%;
+          --sg-sides: -30%;
+        }
+
+        @media (max-width: 1023px) {
+          .studio-showcase-grid {
+          --sg-perspective-origin: 50% 40%;
+          --sg-transform: rotateX(52deg) rotateZ(-42deg);
+          --sg-top: -90%;
+          --sg-bottom: -30%;
+          --sg-sides: -50%;
+            max-height: 420px;
+          }
+        }
+
+        @media (max-width: 639px) {
+          .studio-showcase-grid {
+          --sg-perspective-origin: 50% 40%;
+          --sg-transform: rotateX(52deg) rotateZ(-42deg);
+          --sg-top: -60%;
+          --sg-bottom: 0%;
+          --sg-sides: -90%;
+            max-height: 300px;
+          }
+        }
+      `}</style>
+
+      {customCSS && <style dangerouslySetInnerHTML={{ __html: customCSS }} />}
+
+      <div
+        data-content-type="ddShowcaseGrid"
+        ref={wrapperRef}
+        className={cn('relative overflow-clip', shouldStick || shouldFade ? 'z-0' : '')}
+        style={{
+          height: shouldStick || shouldFade ? `${sectionHeight + fadeDistance}px` : undefined,
+        }}
+      >
+        <div
+          ref={stickyRef}
+          className={cn(
+            'relative will-change-opacity',
+            shouldStick || shouldFade ? 'sticky top-0' : '',
+          )}
+        >
+          <div className="pointer-events-none absolute left-0 right-0 top-0 bottom-0 z-10 h-[150vh] bg-[linear-gradient(0deg,#ffffff,#ffffff,#ffffff,#ffffff,transparent)] dark:bg-[linear-gradient(0deg,#0a0a0a,#0a0a0a,#0a0a0a,#0a0a0a,transparent)] opacity-80 mix-blend-color-dodge" />
+          <div
+            id={sectionId ?? undefined}
+            className="studio-showcase-grid relative z-0! overflow-hidden"
+            style={{ height: `${sectionHeight}px` }}
+          >
+            #BlockName-DDShowcaseGrid
+            <div className="pointer-events-none absolute inset-x-0 top-0 z-10 h-80 bg-linear-to-b from-white to-transparent dark:from-[#0a0a0a]" />
+            <div className="pointer-events-none absolute inset-x-0 bottom-0 z-10 h-80 bg-linear-to-t from-white to-transparent dark:from-[#0a0a0a]" />
+            <div className="pointer-events-none absolute inset-y-0 left-0 z-10 w-40 bg-linear-to-r from-white to-transparent dark:from-[#0a0a0a]" />
+            <div className="pointer-events-none absolute inset-y-0 right-0 z-10 w-40 bg-linear-to-l from-white to-transparent dark:from-[#0a0a0a]" />
+
+            <div
+              className="absolute inset-0"
+              style={{
+                perspective: 'var(--sg-perspective)',
+                perspectiveOrigin: 'var(--sg-perspective-origin)',
+              }}
+            >
+              <div
+                style={{
+                  transform: 'var(--sg-transform)',
+                  transformOrigin: 'center center',
+                  position: 'absolute',
+                  top: 'var(--sg-top)',
+                  left: 'var(--sg-sides)',
+                  right: 'var(--sg-sides)',
+                  bottom: 'var(--sg-bottom)',
+                  display: 'flex',
+                  gap: '16px',
+                  alignItems: 'flex-start',
+                }}
+              >
+                {columnItems.map((col, colIndex) => (
+                  <div
+                    key={col.id ?? colIndex}
+                    className="studio-showcase-col"
+                    style={{
+                      flex: '1',
+                      overflow: 'hidden',
+                      height: `${colHeight}px`,
+                    }}
+                  >
+                    <ScrollColumn
+                      images={col.images ?? []}
+                      speed={col.speed ?? 0.5}
+                      initialOffset={col.initialOffset ?? 0}
+                      priority={Boolean(priority)}
+                    />
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}
+
+export default DDShowcaseGrid