blocks-dusted 0.1.1 → 0.1.3

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

@@ -1,94 +1,92 @@
-"use client";
+'use client'
 
-import React, { useLayoutEffect, useRef, useState } from "react";
-import Image from "next/image";
-import * as LucideIcons from "lucide-react";
-import { ArrowRight } from "lucide-react";
-import gsap from "gsap";
-import { ScrollTrigger } from "gsap/ScrollTrigger";
-type Media = { url?: string | null; alt?: string | null; [key: string]: any };
+import React, { useLayoutEffect, useRef, useState } from 'react'
+import Image from 'next/image'
+import * as LucideIcons from 'lucide-react'
+import { ArrowRight } from 'lucide-react'
+import gsap from 'gsap'
+import { ScrollTrigger } from 'gsap/ScrollTrigger'
+type Media = { url?: string | null; alt?: string | null; [key: string]: any }
 
-import RichText from "@/components/RichText";
+import RichText from '@/components/RichText'
 
-if (typeof window !== "undefined") {
-  gsap.registerPlugin(ScrollTrigger);
+if (typeof window !== 'undefined') {
+  gsap.registerPlugin(ScrollTrigger)
 }
 
 const ACCENTS = {
-  lime: { hex: "#84cc16", rgb: "132,204,22" },
-  purple: { hex: "#9803e2", rgb: "152,3,226" },
-} as const;
+  lime: { hex: '#84cc16', rgb: '132,204,22' },
+  purple: { hex: '#9803e2', rgb: '152,3,226' },
+} as const
 
-type AccentVariant = keyof typeof ACCENTS;
+type AccentVariant = keyof typeof ACCENTS
 
 function isLocalImageSrc(src?: string | null): src is string {
-  return typeof src === "string" && src.startsWith("/api/media/file/");
+  return typeof src === 'string' && src.startsWith('/api/media/file/')
 }
 
 function DynamicIcon({
   name,
   size = 22,
   ...props
-}: { name?: string | null } & Omit<LucideIcons.LucideProps, "name">) {
-  if (!name) return null;
+}: { name?: string | null } & Omit<LucideIcons.LucideProps, 'name'>) {
+  if (!name) return null
 
-  const Icon = (
-    LucideIcons as unknown as Record<string, React.FC<LucideIcons.LucideProps>>
-  )[name];
+  const Icon = (LucideIcons as unknown as Record<string, React.FC<LucideIcons.LucideProps>>)[name]
 
-  if (!Icon) return null;
+  if (!Icon) return null
 
-  return <Icon size={size} {...props} />;
+  return <Icon size={size} {...props} />
 }
 
 interface TagItem {
-  id?: string | null;
-  tag: string;
+  id?: string | null
+  tag: string
 }
 
 interface CardItem {
-  id?: string | null;
-  iconName?: string | null;
-  number?: string | null;
-  title?: string | null;
-  content?: unknown;
-  statValue?: string | null;
-  statLabel?: string | null;
-  tags?: TagItem[] | null;
-  ctaLabel?: string | null;
-  ctaHref?: string | null;
-  accentVariant?: AccentVariant | null;
-  image?: Media | string | null;
+  id?: string | null
+  iconName?: string | null
+  number?: string | null
+  title?: string | null
+  content?: unknown
+  statValue?: string | null
+  statLabel?: string | null
+  tags?: TagItem[] | null
+  ctaLabel?: string | null
+  ctaHref?: string | null
+  accentVariant?: AccentVariant | null
+  image?: Media | string | null
 }
 
 interface DDStackCardsProps {
-  cards?: CardItem[] | null;
+  cards?: CardItem[] | null
 
-  cardOffset?: number | null;
-  initialStickyTop?: number | null;
-  depthZ?: number | null;
-  scaleStep?: number | null;
+  cardOffset?: number | null
+  initialStickyTop?: number | null
+  depthZ?: number | null
+  scaleStep?: number | null
 
-  cardOffsetTablet?: number | null;
-  initialStickyTopTablet?: number | null;
-  depthZTablet?: number | null;
-  scaleStepTablet?: number | null;
+  cardOffsetTablet?: number | null
+  initialStickyTopTablet?: number | null
+  depthZTablet?: number | null
+  scaleStepTablet?: number | null
 
-  cardOffsetMobile?: number | null;
-  initialStickyTopMobile?: number | null;
-  depthZMobile?: number | null;
-  scaleStepMobile?: number | null;
+  cardOffsetMobile?: number | null
+  initialStickyTopMobile?: number | null
+  depthZMobile?: number | null
+  scaleStepMobile?: number | null
 
-  sectionId?: string | null;
-  [key: string]: unknown;
+  sectionId?: string | null
+  [key: string]: unknown
 }
 
 type ResponsiveStackValues = {
-  cardOffset: number;
-  initialStickyTop: number;
-  depthZ: number;
-  scaleStep: number;
-};
+  cardOffset: number
+  initialStickyTop: number
+  depthZ: number
+  scaleStep: number
+}
 
 function getResponsiveStackValues({
   cardOffset,
@@ -105,86 +103,78 @@ function getResponsiveStackValues({
   scaleStepMobile,
 }: DDStackCardsProps): ResponsiveStackValues {
   const desktopValues = {
-    cardOffset: typeof cardOffset === "number" ? cardOffset : 14,
-    initialStickyTop:
-      typeof initialStickyTop === "number" ? initialStickyTop : 0,
-    depthZ: typeof depthZ === "number" ? depthZ : 40,
-    scaleStep: typeof scaleStep === "number" ? scaleStep : 0.18,
-  };
+    cardOffset: typeof cardOffset === 'number' ? cardOffset : 14,
+    initialStickyTop: typeof initialStickyTop === 'number' ? initialStickyTop : 0,
+    depthZ: typeof depthZ === 'number' ? depthZ : 40,
+    scaleStep: typeof scaleStep === 'number' ? scaleStep : 0.18,
+  }
 
-  if (typeof window === "undefined") return desktopValues;
+  if (typeof window === 'undefined') return desktopValues
 
   const tabletValues = {
     cardOffset:
-      typeof cardOffsetTablet === "number"
+      typeof cardOffsetTablet === 'number'
         ? cardOffsetTablet
         : Math.max(8, desktopValues.cardOffset * 0.75),
     initialStickyTop:
-      typeof initialStickyTopTablet === "number"
+      typeof initialStickyTopTablet === 'number'
         ? initialStickyTopTablet
         : desktopValues.initialStickyTop,
     depthZ:
-      typeof depthZTablet === "number"
-        ? depthZTablet
-        : Math.max(16, desktopValues.depthZ * 0.65),
+      typeof depthZTablet === 'number' ? depthZTablet : Math.max(16, desktopValues.depthZ * 0.65),
     scaleStep:
-      typeof scaleStepTablet === "number"
+      typeof scaleStepTablet === 'number'
         ? scaleStepTablet
         : Math.min(desktopValues.scaleStep, 0.08),
-  };
+  }
 
   const mobileValues = {
     cardOffset:
-      typeof cardOffsetMobile === "number"
+      typeof cardOffsetMobile === 'number'
         ? cardOffsetMobile
         : Math.max(6, desktopValues.cardOffset * 0.5),
     initialStickyTop:
-      typeof initialStickyTopMobile === "number"
+      typeof initialStickyTopMobile === 'number'
         ? initialStickyTopMobile
         : desktopValues.initialStickyTop,
     depthZ:
-      typeof depthZMobile === "number"
-        ? depthZMobile
-        : Math.max(8, desktopValues.depthZ * 0.35),
+      typeof depthZMobile === 'number' ? depthZMobile : Math.max(8, desktopValues.depthZ * 0.35),
     scaleStep:
-      typeof scaleStepMobile === "number"
+      typeof scaleStepMobile === 'number'
         ? scaleStepMobile
         : Math.min(desktopValues.scaleStep, 0.045),
-  };
+  }
 
-  if (window.matchMedia("(max-width: 767px)").matches) return mobileValues;
-  if (window.matchMedia("(max-width: 1023px)").matches) return tabletValues;
+  if (window.matchMedia('(max-width: 767px)').matches) return mobileValues
+  if (window.matchMedia('(max-width: 1023px)').matches) return tabletValues
 
-  return desktopValues;
+  return desktopValues
 }
 
 export function DDStackCards(props: DDStackCardsProps) {
-  const { cards, sectionId } = props;
-
-  const wrapperRef = useRef<HTMLDivElement | null>(null);
-  const cardRefs = useRef<(HTMLElement | null)[]>([]);
-  const [layoutValues, setLayoutValues] = useState<ResponsiveStackValues>(
-    () => ({
-      cardOffset: typeof props.cardOffset === "number" ? props.cardOffset : 14,
-      initialStickyTop:
-        typeof props.initialStickyTop === "number" ? props.initialStickyTop : 0,
-      depthZ: typeof props.depthZ === "number" ? props.depthZ : 40,
-      scaleStep: typeof props.scaleStep === "number" ? props.scaleStep : 0.18,
-    }),
-  );
+  const { cards, sectionId } = props
+
+  const wrapperRef = useRef<HTMLDivElement | null>(null)
+  const cardRefs = useRef<(HTMLElement | null)[]>([])
+  const [layoutValues, setLayoutValues] = useState<ResponsiveStackValues>(() => ({
+    cardOffset: typeof props.cardOffset === 'number' ? props.cardOffset : 14,
+    initialStickyTop: typeof props.initialStickyTop === 'number' ? props.initialStickyTop : 0,
+    depthZ: typeof props.depthZ === 'number' ? props.depthZ : 40,
+    scaleStep: typeof props.scaleStep === 'number' ? props.scaleStep : 0.18,
+  }))
 
   useLayoutEffect(() => {
     const updateValues = () => {
-      setLayoutValues(getResponsiveStackValues(props));
-    };
+      setLayoutValues(getResponsiveStackValues(props))
+    }
 
-    updateValues();
+    updateValues()
 
-    window.addEventListener("resize", updateValues);
+    window.addEventListener('resize', updateValues)
 
     return () => {
-      window.removeEventListener("resize", updateValues);
-    };
+      window.removeEventListener('resize', updateValues)
+    }
   }, [
     props.cardOffset,
     props.initialStickyTop,
@@ -198,32 +188,32 @@ export function DDStackCards(props: DDStackCardsProps) {
     props.initialStickyTopMobile,
     props.depthZMobile,
     props.scaleStepMobile,
-  ]);
+  ])
 
   useLayoutEffect(() => {
     const timer = window.setTimeout(() => {
-      const wrapper = wrapperRef.current;
-      const cardEls = cardRefs.current.filter(Boolean) as HTMLDivElement[];
+      const wrapper = wrapperRef.current
+      const cardEls = cardRefs.current.filter(Boolean) as HTMLDivElement[]
 
-      if (!wrapper || !cardEls.length) return;
+      if (!wrapper || !cardEls.length) return
 
       const ctx = gsap.context(() => {
         gsap.set(wrapper, {
           autoAlpha: 1,
-          willChange: "opacity",
-        });
+          willChange: 'opacity',
+        })
 
         gsap.set(cardEls, {
           transformPerspective: 1200,
-          transformOrigin: "top center",
-        });
+          transformOrigin: 'top center',
+        })
 
         cardEls.forEach((card, i) => {
           for (let j = i + 1; j < cardEls.length; j++) {
-            const step = j - i;
-            const prevStep = step - 1;
+            const step = j - i
+            const prevStep = step - 1
             const triggerStickyTop =
-              layoutValues.initialStickyTop + (j - 1) * layoutValues.cardOffset;
+              layoutValues.initialStickyTop + (j - 1) * layoutValues.cardOffset
 
             gsap.fromTo(
               card,
@@ -236,7 +226,7 @@ export function DDStackCards(props: DDStackCardsProps) {
                 z: -step * layoutValues.depthZ,
                 force3D: true,
                 filter: `brightness(${Math.max(0.65, 1 - step * 0.06)})`,
-                borderRadius: "20px",
+                borderRadius: '20px',
                 immediateRender: false,
                 scrollTrigger: {
                   trigger: cardEls[j],
@@ -246,45 +236,45 @@ export function DDStackCards(props: DDStackCardsProps) {
                   invalidateOnRefresh: true,
                 },
               },
-            );
+            )
           }
-        });
+        })
 
-        const lastCard = cardEls[cardEls.length - 1];
+        const lastCard = cardEls[cardEls.length - 1]
 
         gsap.to(wrapper, {
           autoAlpha: 0,
-          ease: "none",
+          ease: 'none',
           scrollTrigger: {
             trigger: lastCard,
-            start: "top top",
+            start: 'top top',
             end: () => `+=${window.innerHeight * 0.3}`,
             scrub: true,
             invalidateOnRefresh: true,
           },
-        });
+        })
 
         requestAnimationFrame(() => {
-          ScrollTrigger.refresh();
-        });
-      }, wrapper);
+          ScrollTrigger.refresh()
+        })
+      }, wrapper)
 
-      return () => ctx.revert();
-    }, 120);
+      return () => ctx.revert()
+    }, 120)
 
     return () => {
-      window.clearTimeout(timer);
-    };
+      window.clearTimeout(timer)
+    }
   }, [
     layoutValues.cardOffset,
     layoutValues.initialStickyTop,
     layoutValues.depthZ,
     layoutValues.scaleStep,
-  ]);
+  ])
 
-  if (!cards?.length) return null;
+  if (!cards?.length) return null
 
-  const totalCards = cards.length;
+  const totalCards = cards.length
 
   return (
     <section
@@ -292,32 +282,31 @@ export function DDStackCards(props: DDStackCardsProps) {
       className="stack-cards-block relative w-full invert-[0.95] brightness-110 contrast-125 dark:brightness-100 dark:contrast-100 dark:invert-[0]"
     >
       {cards.map((card, i) => {
-        const accent = ACCENTS[card.accentVariant ?? "lime"];
+        const accent = ACCENTS[card.accentVariant ?? 'lime']
         const cardMedia =
-          card.image && typeof card.image === "object"
-            ? (card.image as Media)
-            : null;
+          card.image && typeof card.image === 'object' ? (card.image as Media) : null
 
         return (
           <section
             key={card.id ?? i}
             id={i === 0 ? (sectionId ?? undefined) : undefined}
             ref={(el) => {
-              cardRefs.current[i] = el;
+              cardRefs.current[i] = el
             }}
             className="stack-card renderblock-container sticky! w-full overflow-hidden px-4 py-16 sm:px-6 lg:py-32"
             style={{
               top: `${layoutValues.initialStickyTop + i * layoutValues.cardOffset}px`,
               zIndex: i + 1,
-              willChange: "transform",
+              willChange: 'transform',
             }}
           >
+            {i === 0 ? '#BlockName-DDStackCards' : null}
             <div
               className="relative mx-auto w-full max-w-5xl overflow-hidden rounded-2xl"
               style={{
-                background: "rgb(8 8 10 / 90%)",
-                border: "1px solid rgba(255,255,255,0.07)",
-                backdropFilter: "blur(8px)",
+                background: 'rgb(8 8 10 / 90%)',
+                border: '1px solid rgba(255,255,255,0.07)',
+                backdropFilter: 'blur(8px)',
               }}
             >
               <div
@@ -340,11 +329,7 @@ export function DDStackCards(props: DDStackCardsProps) {
                           }}
                         >
                           <span style={{ color: accent.hex }}>
-                            <DynamicIcon
-                              className="shrink-0"
-                              name={card.iconName}
-                              size={20}
-                            />
+                            <DynamicIcon className="shrink-0" name={card.iconName} size={20} />
                           </span>
                         </div>
 
@@ -354,8 +339,7 @@ export function DDStackCards(props: DDStackCardsProps) {
                               className="mb-0.5 text-[10px] font-black uppercase tracking-widest md:text-xs"
                               style={{ color: `rgba(${accent.rgb},0.6)` }}
                             >
-                              {card.number} /{" "}
-                              {String(totalCards).padStart(2, "0")}
+                              {card.number} / {String(totalCards).padStart(2, '0')}
                             </div>
                           )}
 
@@ -381,7 +365,7 @@ export function DDStackCards(props: DDStackCardsProps) {
                           {card.statLabel && (
                             <span
                               className="mt-1 text-xs"
-                              style={{ color: "rgba(255,255,255,0.3)" }}
+                              style={{ color: 'rgba(255,255,255,0.3)' }}
                             >
                               {card.statLabel}
                             </span>
@@ -396,7 +380,7 @@ export function DDStackCards(props: DDStackCardsProps) {
                         enableProse={false}
                         enableGutter={false}
                         className="max-w-xl text-sm leading-relaxed text-stone-200 dark:text-stone-200 md:text-base"
-                        style={{ color: "rgba(255,255,255,0.45)" }}
+                        style={{ color: 'rgba(255,255,255,0.45)' }}
                       />
                     ) : null}
                   </div>
@@ -422,7 +406,7 @@ export function DDStackCards(props: DDStackCardsProps) {
 
                     {card.ctaLabel && (
                       <a
-                        href={card.ctaHref ?? "#"}
+                        href={card.ctaHref ?? '#'}
                         className="group flex cursor-pointer items-center gap-2 whitespace-nowrap text-xs font-black uppercase tracking-widest"
                         style={{ color: accent.hex }}
                       >
@@ -454,29 +438,22 @@ export function DDStackCards(props: DDStackCardsProps) {
                   {isLocalImageSrc(cardMedia?.url) ? (
                     <Image
                       src={cardMedia.url}
-                      alt={cardMedia.alt ?? card.title ?? ""}
+                      alt={cardMedia.alt ?? card.title ?? ''}
                       fill
                       className="relative z-10 object-cover opacity-80"
                       sizes="(max-width: 640px) 88px, (max-width: 768px) 128px, (max-width: 1280px) 192px, 320px"
                     />
                   ) : (
                     <>
-                      <span
-                        className="relative z-10"
-                        style={{ color: `rgba(${accent.rgb},1)` }}
-                      >
-                        <DynamicIcon
-                          className="shrink-0"
-                          name={card.iconName}
-                          size={96}
-                        />
+                      <span className="relative z-10" style={{ color: `rgba(${accent.rgb},1)` }}>
+                        <DynamicIcon className="shrink-0" name={card.iconName} size={96} />
                       </span>
 
                       {card.number && (
                         <div
                           className="absolute bottom-4 right-6 select-none font-black leading-none"
                           style={{
-                            fontSize: "80px",
+                            fontSize: '80px',
                             color: `rgba(${accent.rgb},0.2)`,
                           }}
                         >
@@ -489,8 +466,8 @@ export function DDStackCards(props: DDStackCardsProps) {
               </div>
             </div>
           </section>
-        );
+        )
       })}
     </section>
-  );
+  )
 }