blocks-dusted 0.1.1 → 0.1.3

package/templates/blocks/DD-Slider-A/Component.tsx

@@ -1,252 +1,237 @@
-"use client";
-
-import React, { useState, useCallback, useEffect } from "react";
-import Image from "next/image";
-import { ChevronLeft, ChevronRight } from "lucide-react";
-import { cn } from "@/utilities/ui";
-import useEmblaCarousel from "embla-carousel-react";
-
-type MediaObj = { url?: string | null; alt?: string | null };
-
-type Slide = {
-  id?: string | null;
-  title: string;
-  category?: string | null;
-  description?: string | null;
-  image?: MediaObj | string | null;
-  imageFallbackUrl?: string | null;
-};
-
-export type DDSliderAProps = {
-  blockType: "DD-Slider-A";
-  blockName?: string | null;
-  eyebrow?: string | null;
-  heading?: string | null;
-  subtext?: string | null;
-  slides?: Slide[] | null;
-  sectionId?: string | null;
-  customCSS?: string | null;
-};
-
-function isValidImageSrc(src?: string | null): src is string {
-  return Boolean(src && src.startsWith("/api/media/file/"));
-}
-
-function getImageSrc(slide: Slide): string {
-  const candidateSrc =
-    slide.image &&
-    typeof slide.image === "object" &&
-    (slide.image as MediaObj).url
-      ? (slide.image as MediaObj).url!
-      : (slide.imageFallbackUrl ?? "");
-
-  return isValidImageSrc(candidateSrc) ? candidateSrc : "";
-}
-
-export const DDSliderA: React.FC<DDSliderAProps> = ({
-  eyebrow,
-  heading,
-  subtext,
-  slides: slidesProp,
-  sectionId,
-  customCSS,
-}) => {
-  const slides = slidesProp ?? [];
-  const [emblaRef, emblaApi] = useEmblaCarousel({ loop: true });
-  const [activeIdx, setActiveIdx] = useState(0);
-  const [loadedSlides, setLoadedSlides] = useState<Record<number, boolean>>({});
-  const [loadedThumbs, setLoadedThumbs] = useState<Record<number, boolean>>({});
-
-  const onSelect = useCallback(() => {
-    if (!emblaApi) return;
-    setActiveIdx(emblaApi.selectedScrollSnap());
-  }, [emblaApi]);
-
-  useEffect(() => {
-    if (!emblaApi) return;
-    onSelect();
-    emblaApi.on("select", onSelect);
-    emblaApi.on("reInit", onSelect);
-    return () => {
-      emblaApi.off("select", onSelect);
-      emblaApi.off("reInit", onSelect);
-    };
-  }, [emblaApi, onSelect]);
-
-  const scrollPrev = useCallback(() => emblaApi?.scrollPrev(), [emblaApi]);
-  const scrollNext = useCallback(() => emblaApi?.scrollNext(), [emblaApi]);
-  const scrollTo = useCallback(
-    (i: number) => emblaApi?.scrollTo(i),
-    [emblaApi],
-  );
-
-  if (!slides.length) return null;
-
-  return (
-    <section id={sectionId ?? undefined} className="py-20 overflow-hidden">
-      {customCSS && <style dangerouslySetInnerHTML={{ __html: customCSS }} />}
-      <div className="max-w-6xl lg:max-w-7xl mx-auto px-4 md:px-6">
-        {/* Optional section header */}
-        {(eyebrow || heading || subtext) && (
-          <div className="mb-10 text-center">
-            {eyebrow && (
-              <p className="text-lime-500 text-xs font-bold uppercase tracking-widest mb-2">
-                {eyebrow}
-              </p>
-            )}
-            {heading && (
-              <h2 className="text-4xl lg:text-5xl font-bold text-stone-900 dark:text-stone-50 leading-tight">
-                {heading}
-              </h2>
-            )}
-            {subtext && (
-              <p className="text-stone-400 mt-3 text-base max-w-2xl mx-auto">
-                {subtext}
-              </p>
-            )}
-          </div>
-        )}
-
-        <div className="relative rounded-3xl overflow-hidden">
-          {/* Embla viewport */}
-          <div
-            ref={emblaRef}
-            className="overflow-hidden select-none cursor-grab active:cursor-grabbing h-[480px] lg:h-[560px]"
-          >
-            <div className="flex h-full">
-              {slides.map((slide, i) => {
-                const imgSrc = getImageSrc(slide);
-                return (
-                  <div
-                    key={slide.id ?? i}
-                    className="flex-none w-full h-full relative"
-                  >
-                    {imgSrc ? (
-                      <>
-                        {!loadedSlides[i] && (
-                          <div className="absolute inset-0 bg-stone-900 animate-pulse" />
-                        )}
-                        <Image
-                          src={imgSrc}
-                          alt={slide.title}
-                          fill
-                          sizes="100vw"
-                          priority={i === 0}
-                          className="w-full h-full object-cover object-top"
-                          draggable={false}
-                          onLoad={() =>
-                            setLoadedSlides((prev) => ({ ...prev, [i]: true }))
-                          }
-                        />
-                      </>
-                    ) : (
-                      <div className="w-full h-full bg-gradient-to-br from-violet-950 to-indigo-950" />
-                    )}
-
-                    {/* Gradient overlay */}
-                    <div className="absolute inset-0 bg-gradient-to-r from-stone-950/80 via-stone-950/40 to-transparent pointer-events-none" />
-
-                    {/* Slide content */}
-                    <div className="absolute bottom-0 left-0 right-0 p-8 lg:p-12 pointer-events-none">
-                      <div className="max-w-lg">
-                        {slide.category && (
-                          <span className="inline-block bg-lime-500/50 border-lime-500 border text-stone-200 text-xs font-bold px-3 py-1 rounded-full mb-3 uppercase tracking-widest scale-90 origin-top-left">
-                            {slide.category}
-                          </span>
-                        )}
-                        <h3 className="text-stone-50 font-black text-3xl lg:text-4xl mb-3">
-                          {slide.title}
-                        </h3>
-                        {slide.description && (
-                          <p className="text-stone-50/70 text-base leading-relaxed">
-                            {slide.description}
-                          </p>
-                        )}
-                      </div>
-                    </div>
-                  </div>
-                );
-              })}
-            </div>
-          </div>
-
-          {/* Navigation arrows */}
-          <button
-            onClick={scrollPrev}
-            aria-label="Previous slide"
-            className="absolute left-1 top-1/2 -translate-y-1/2 z-20 w-12 h-12 flex items-center justify-center rounded-full bg-stone-50/5 hover:bg-lime-500 text-stone-50 backdrop-blur-sm transition-all cursor-pointer"
-          >
-            <ChevronLeft className="w-5 h-5" />
-          </button>
-          <button
-            onClick={scrollNext}
-            aria-label="Next slide"
-            className="absolute right-1 top-1/2 -translate-y-1/2 z-20 w-12 h-12 flex items-center justify-center rounded-full bg-stone-50/5 hover:bg-lime-500 text-stone-50 backdrop-blur-sm transition-all cursor-pointer"
-          >
-            <ChevronRight className="w-5 h-5" />
-          </button>
-
-          {/* Thumbnail strip */}
-          <div className="absolute bottom-4 right-4 lg:right-8 z-20 flex gap-2">
-            {slides.map((slide, i) => {
-              const imgSrc = getImageSrc(slide);
-              return (
-                <button
-                  key={slide.id ?? i}
-                  onClick={() => scrollTo(i)}
-                  aria-label={`Go to slide: ${slide.title}`}
-                  className={cn(
-                    "relative w-16 h-12 rounded-lg overflow-hidden border-2 transition-all cursor-pointer",
-                    i === activeIdx
-                      ? "border-lime-500 scale-110"
-                      : "border-white/30 opacity-60 hover:opacity-100",
-                  )}
-                >
-                  {imgSrc ? (
-                    <>
-                      {!loadedThumbs[i] && (
-                        <div className="absolute inset-0 bg-stone-800 animate-pulse" />
-                      )}
-                      <Image
-                        src={imgSrc}
-                        alt={slide.title}
-                        fill
-                        sizes="64px"
-                        className="w-full h-full object-cover object-top"
-                        draggable={false}
-                        onLoad={() =>
-                          setLoadedThumbs((prev) => ({ ...prev, [i]: true }))
-                        }
-                      />
-                    </>
-                  ) : (
-                    <div className="w-full h-full bg-stone-800" />
-                  )}
-                </button>
-              );
-            })}
-          </div>
-        </div>
-
-        {/* Dot indicators */}
-        {slides.length > 1 && (
-          <div className="flex justify-center gap-2 mt-6">
-            {slides.map((_, i) => (
-              <button
-                key={i}
-                onClick={() => scrollTo(i)}
-                aria-label={`Go to slide ${i + 1}`}
-                className={cn(
-                  "rounded-full transition-all duration-300 cursor-pointer",
-                  i === activeIdx
-                    ? "w-8 h-2.5 bg-lime-500"
-                    : "w-2.5 h-2.5 bg-stone-600 hover:bg-stone-400",
-                )}
-              />
-            ))}
-          </div>
-        )}
-      </div>
-    </section>
-  );
-};
+'use client'
+
+import React, { useState, useCallback, useEffect } from 'react'
+import Image from 'next/image'
+import { ChevronLeft, ChevronRight } from 'lucide-react'
+import { cn } from '@/utilities/ui'
+import useEmblaCarousel from 'embla-carousel-react'
+
+type MediaObj = { url?: string | null; alt?: string | null }
+
+type Slide = {
+  id?: string | null
+  title: string
+  category?: string | null
+  description?: string | null
+  image?: MediaObj | string | null
+  imageFallbackUrl?: string | null
+}
+
+export type DDSliderAProps = {
+  blockType: 'DD-Slider-A'
+  blockName?: string | null
+  eyebrow?: string | null
+  heading?: string | null
+  subtext?: string | null
+  slides?: Slide[] | null
+  sectionId?: string | null
+  customCSS?: string | null
+}
+
+function isValidImageSrc(src?: string | null): src is string {
+  return Boolean(src && src.startsWith('/api/media/file/'))
+}
+
+function getImageSrc(slide: Slide): string {
+  const candidateSrc =
+    slide.image && typeof slide.image === 'object' && (slide.image as MediaObj).url
+      ? (slide.image as MediaObj).url!
+      : (slide.imageFallbackUrl ?? '')
+
+  return isValidImageSrc(candidateSrc) ? candidateSrc : ''
+}
+
+export const DDSliderA: React.FC<DDSliderAProps> = ({
+  eyebrow,
+  heading,
+  subtext,
+  slides: slidesProp,
+  sectionId,
+  customCSS,
+}) => {
+  const slides = slidesProp ?? []
+  const [emblaRef, emblaApi] = useEmblaCarousel({ loop: true })
+  const [activeIdx, setActiveIdx] = useState(0)
+  const [loadedSlides, setLoadedSlides] = useState<Record<number, boolean>>({})
+  const [loadedThumbs, setLoadedThumbs] = useState<Record<number, boolean>>({})
+
+  const onSelect = useCallback(() => {
+    if (!emblaApi) return
+    setActiveIdx(emblaApi.selectedScrollSnap())
+  }, [emblaApi])
+
+  useEffect(() => {
+    if (!emblaApi) return
+    onSelect()
+    emblaApi.on('select', onSelect)
+    emblaApi.on('reInit', onSelect)
+    return () => {
+      emblaApi.off('select', onSelect)
+      emblaApi.off('reInit', onSelect)
+    }
+  }, [emblaApi, onSelect])
+
+  const scrollPrev = useCallback(() => emblaApi?.scrollPrev(), [emblaApi])
+  const scrollNext = useCallback(() => emblaApi?.scrollNext(), [emblaApi])
+  const scrollTo = useCallback((i: number) => emblaApi?.scrollTo(i), [emblaApi])
+
+  if (!slides.length) return null
+
+  return (
+    <section id={sectionId ?? undefined} className="py-20 overflow-hidden">
+      {customCSS && <style dangerouslySetInnerHTML={{ __html: customCSS }} />}
+      <div className="max-w-6xl lg:max-w-7xl mx-auto px-4 md:px-6">
+        {/* Optional section header */}
+        #BlockName-DDSliderA
+        {(eyebrow || heading || subtext) && (
+          <div className="mb-10 text-center">
+            {eyebrow && (
+              <p className="text-lime-500 text-xs font-bold uppercase tracking-widest mb-2">
+                {eyebrow}
+              </p>
+            )}
+            {heading && (
+              <h2 className="text-4xl lg:text-5xl font-bold text-stone-900 dark:text-stone-50 leading-tight">
+                {heading}
+              </h2>
+            )}
+            {subtext && (
+              <p className="text-stone-400 mt-3 text-base max-w-2xl mx-auto">{subtext}</p>
+            )}
+          </div>
+        )}
+        <div className="relative rounded-3xl overflow-hidden">
+          {/* Embla viewport */}
+          <div
+            ref={emblaRef}
+            className="overflow-hidden select-none cursor-grab active:cursor-grabbing h-[480px] lg:h-[560px]"
+          >
+            <div className="flex h-full">
+              {slides.map((slide, i) => {
+                const imgSrc = getImageSrc(slide)
+                return (
+                  <div key={slide.id ?? i} className="flex-none w-full h-full relative">
+                    {imgSrc ? (
+                      <>
+                        {!loadedSlides[i] && (
+                          <div className="absolute inset-0 bg-stone-900 animate-pulse" />
+                        )}
+                        <Image
+                          src={imgSrc}
+                          alt={slide.title}
+                          fill
+                          sizes="100vw"
+                          priority={i === 0}
+                          className="w-full h-full object-cover object-top"
+                          draggable={false}
+                          onLoad={() => setLoadedSlides((prev) => ({ ...prev, [i]: true }))}
+                        />
+                      </>
+                    ) : (
+                      <div className="w-full h-full bg-gradient-to-br from-violet-950 to-indigo-950" />
+                    )}
+
+                    {/* Gradient overlay */}
+                    <div className="absolute inset-0 bg-gradient-to-r from-stone-950/80 via-stone-950/40 to-transparent pointer-events-none" />
+
+                    {/* Slide content */}
+                    <div className="absolute bottom-0 left-0 right-0 p-8 lg:p-12 pointer-events-none">
+                      <div className="max-w-lg">
+                        {slide.category && (
+                          <span className="inline-block bg-lime-500/50 border-lime-500 border text-stone-200 text-xs font-bold px-3 py-1 rounded-full mb-3 uppercase tracking-widest scale-90 origin-top-left">
+                            {slide.category}
+                          </span>
+                        )}
+                        <h3 className="text-stone-50 font-black text-3xl lg:text-4xl mb-3">
+                          {slide.title}
+                        </h3>
+                        {slide.description && (
+                          <p className="text-stone-50/70 text-base leading-relaxed">
+                            {slide.description}
+                          </p>
+                        )}
+                      </div>
+                    </div>
+                  </div>
+                )
+              })}
+            </div>
+          </div>
+
+          {/* Navigation arrows */}
+          <button
+            onClick={scrollPrev}
+            aria-label="Previous slide"
+            className="absolute left-1 top-1/2 -translate-y-1/2 z-20 w-12 h-12 flex items-center justify-center rounded-full bg-stone-50/5 hover:bg-lime-500 text-stone-50 backdrop-blur-sm transition-all cursor-pointer"
+          >
+            <ChevronLeft className="w-5 h-5" />
+          </button>
+          <button
+            onClick={scrollNext}
+            aria-label="Next slide"
+            className="absolute right-1 top-1/2 -translate-y-1/2 z-20 w-12 h-12 flex items-center justify-center rounded-full bg-stone-50/5 hover:bg-lime-500 text-stone-50 backdrop-blur-sm transition-all cursor-pointer"
+          >
+            <ChevronRight className="w-5 h-5" />
+          </button>
+
+          {/* Thumbnail strip */}
+          <div className="absolute bottom-4 right-4 lg:right-8 z-20 flex gap-2">
+            {slides.map((slide, i) => {
+              const imgSrc = getImageSrc(slide)
+              return (
+                <button
+                  key={slide.id ?? i}
+                  onClick={() => scrollTo(i)}
+                  aria-label={`Go to slide: ${slide.title}`}
+                  className={cn(
+                    'relative w-16 h-12 rounded-lg overflow-hidden border-2 transition-all cursor-pointer',
+                    i === activeIdx
+                      ? 'border-lime-500 scale-110'
+                      : 'border-white/30 opacity-60 hover:opacity-100',
+                  )}
+                >
+                  {imgSrc ? (
+                    <>
+                      {!loadedThumbs[i] && (
+                        <div className="absolute inset-0 bg-stone-800 animate-pulse" />
+                      )}
+                      <Image
+                        src={imgSrc}
+                        alt={slide.title}
+                        fill
+                        sizes="64px"
+                        className="w-full h-full object-cover object-top"
+                        draggable={false}
+                        onLoad={() => setLoadedThumbs((prev) => ({ ...prev, [i]: true }))}
+                      />
+                    </>
+                  ) : (
+                    <div className="w-full h-full bg-stone-800" />
+                  )}
+                </button>
+              )
+            })}
+          </div>
+        </div>
+        {/* Dot indicators */}
+        {slides.length > 1 && (
+          <div className="flex justify-center gap-2 mt-6">
+            {slides.map((_, i) => (
+              <button
+                key={i}
+                onClick={() => scrollTo(i)}
+                aria-label={`Go to slide ${i + 1}`}
+                className={cn(
+                  'rounded-full transition-all duration-300 cursor-pointer',
+                  i === activeIdx
+                    ? 'w-8 h-2.5 bg-lime-500'
+                    : 'w-2.5 h-2.5 bg-stone-600 hover:bg-stone-400',
+                )}
+              />
+            ))}
+          </div>
+        )}
+      </div>
+    </section>
+  )
+}