blocks-dusted 0.1.11 → 0.1.13

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

@@ -1,249 +1,251 @@
-'use client'
-
-import React, { useState, useCallback, useEffect } from 'react'
-import Link from 'next/link'
-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 }
-
-function isValidImageSrc(src?: string | null): src is string {
-  return Boolean(src && src.startsWith('/api/media/file/'))
-}
-
-type CarouselItemA = {
-  id?: string | null
-  name: string
-  category?: string | null
-  badge?: string | null
-  image?: MediaObj | string | null
-  imageFallbackUrl?: string | null
-  description?: string | null
-  href?: string | null
-  features?: Array<{ id?: string | null; label?: string | null }> | null
-}
-
-export type DDCarouselAProps = {
-  blockType: 'DD-Carousel-A'
-  blockName?: string | null
-  eyebrow?: string | null
-  heading?: string | null
-  subtext?: string | null
-  viewAllLabel?: string | null
-  viewAllHref?: string | null
-  items?: CarouselItemA[] | null
-  sectionId?: string | null
-  customCSS?: string | null
-}
-
-export const DDCarouselA: React.FC<DDCarouselAProps> = ({
-  eyebrow,
-  heading,
-  subtext,
-  viewAllLabel = 'View All',
-  viewAllHref,
-  items: itemsProp,
-  sectionId,
-  customCSS,
-}) => {
-  const items = itemsProp ?? []
-  const [emblaRef, emblaApi] = useEmblaCarousel({
-    align: 'start',
-    slidesToScroll: 1,
-    containScroll: 'trimSnaps',
-    dragFree: false,
-  })
-  const [activeIdx, setActiveIdx] = useState(0)
-  const [canPrev, setCanPrev] = useState(false)
-  const [canNext, setCanNext] = useState(true)
-
-  const onSelect = useCallback(() => {
-    if (!emblaApi) return
-    setActiveIdx(emblaApi.selectedScrollSnap())
-    setCanPrev(emblaApi.canScrollPrev())
-    setCanNext(emblaApi.canScrollNext())
-  }, [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])
-
-  const snapCount = emblaApi?.scrollSnapList().length ?? 0
-
-  if (!items.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">
-        {/* Header */}
-        <div className="flex flex-col md:flex-row md:items-end justify-between mb-12 gap-4 px-0 md:px-4">
-          <div>
-            {eyebrow && (
-              <div className="text-lime-500 text-xs font-bold uppercase tracking-widest mb-2">
-                {eyebrow}
-              </div>
-            )}
-            {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-xl">{subtext}</p>}
-          </div>
-          <div className="flex items-center gap-3 shrink-0">
-            <button
-              onClick={scrollPrev}
-              disabled={!canPrev}
-              aria-label="Previous"
-              className="w-11 h-11 flex items-center justify-center rounded-full border-2 border-white/30 text-stone-900 dark:text-stone-50 hover:border-white hover:bg-stone-50 hover:text-stone-900 transition-all disabled:opacity-30 disabled:cursor-not-allowed cursor-pointer"
-            >
-              <ChevronLeft className="w-5 h-5" />
-            </button>
-            <button
-              onClick={scrollNext}
-              disabled={!canNext}
-              aria-label="Next"
-              className="w-11 h-11 flex items-center justify-center rounded-full bg-lime-500 text-stone-900 hover:bg-lime-400 transition-all disabled:opacity-30 disabled:cursor-not-allowed cursor-pointer"
-            >
-              <ChevronRight className="w-5 h-5" />
-            </button>
-            {viewAllHref && (
-              <Link
-                href={viewAllHref}
-                className="ml-2 text-sm font-semibold text-stone-600 dark:text-stone-300 hover:text-lime-500 transition-colors whitespace-nowrap"
-              >
-                {viewAllLabel} →
-              </Link>
-            )}
-          </div>
-        </div>
-        {/* Embla viewport */}
-        <div
-          ref={emblaRef}
-          className="overflow-visible select-none cursor-grab active:cursor-grabbing"
-        >
-          <div className="flex gap-6 py-4">
-            {items.map((item, i) => {
-              const candidateImgSrc =
-                item.image && typeof item.image === 'object' && (item.image as MediaObj).url
-                  ? (item.image as MediaObj).url!
-                  : (item.imageFallbackUrl ?? '')
-              const imgSrc = isValidImageSrc(candidateImgSrc) ? candidateImgSrc : ''
-
-              return (
-                <div
-                  key={item.id ?? i}
-                  className="flex-none w-[calc(100%-0px)] sm:w-[calc(50%-12px)] lg:w-[calc(33.333%-16px)] min-w-70"
-                >
-                  <Link href={item.href ?? '#'} className="block group h-full" draggable={false}>
-                    <div className="border border-border rounded-2xl overflow-hidden hover:-translate-y-2 hover:outline-3 hover:outline-lime-500/30 hover:outline-solid hover:outline-offset-2 transition-all duration-300 hover:shadow-xl hover:border-lime-500/30 h-full flex flex-col">
-                      {/* Image */}
-                      <div className="relative h-52 overflow-hidden bg-stone-900 shrink-0 ">
-                        {imgSrc ? (
-                          <Image
-                            src={imgSrc}
-                            alt={item.name}
-                            fill
-                            sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
-                            className="w-full h-full object-cover object-top group-hover:scale-105 transition-transform duration-500"
-                            draggable={false}
-                          />
-                        ) : (
-                          <div className="w-full h-full bg-linear-to-br from-violet-950 to-indigo-950" />
-                        )}
-
-                        {item.badge && (
-                          <div className="absolute top-3 left-3 bg-lime-500 text-stone-900 text-xs font-bold px-3 py-1 rounded-full z-10">
-                            {item.badge}
-                          </div>
-                        )}
-
-                        <div className="absolute inset-0 bg-linear-to-t from-stone-900/60 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
-
-                        <div className="absolute bottom-3 left-3 right-3 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
-                          <span className="text-stone-900 dark:text-stone-50 text-sm font-semibold">
-                            View Details →
-                          </span>
-                        </div>
-                      </div>
-
-                      {/* Content */}
-                      <div className="p-5 flex flex-col flex-1">
-                        {item.category && (
-                          <div className="text-lime-500 text-xs font-semibold uppercase tracking-widest mb-1">
-                            {item.category}
-                          </div>
-                        )}
-
-                        <h3 className="text-stone-900 dark:text-stone-50 font-bold text-base leading-snug mb-2 line-clamp-2">
-                          {item.name}
-                        </h3>
-
-                        {item.description && (
-                          <div className="grid grid-rows-[0fr] group-hover:grid-rows-[1fr] transition-[grid-template-rows,margin] duration-300 ease-out mb-0 group-hover:mb-4">
-                            <p className="min-h-0 overflow-hidden text-stone-400 text-sm leading-relaxed line-clamp-2 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
-                              {item.description}
-                            </p>
-                          </div>
-                        )}
-
-                        {item.features && item.features.length > 0 && (
-                          <div className="flex flex-wrap gap-1.5 mt-auto">
-                            {item.features.slice(0, 3).map((f, fi) => (
-                              <span
-                                key={f.id ?? fi}
-                                className="text-xs bg-lime-500/10 text-lime-400 px-2.5 py-1 rounded-full"
-                              >
-                                {f.label}
-                              </span>
-                            ))}
-                          </div>
-                        )}
-                      </div>
-                    </div>
-                  </Link>
-                </div>
-              )
-            })}
-          </div>
-        </div>
-        {/* Dot indicators */}
-        {snapCount > 1 && (
-          <div className="flex justify-center gap-2 mt-0">
-            {Array.from({ length: snapCount }).map((_, i) => (
-              <button
-                key={i}
-                onClick={() => scrollTo(i)}
-                aria-label={`Go to slide ${i + 1}`}
-                className="flex h-11 w-11 items-center justify-center rounded-full cursor-pointer"
-              >
-                <span
-                  className={cn(
-                    'block rounded-full transition-all duration-300',
-                    i === activeIdx
-                      ? 'h-2.5 w-8 bg-lime-500'
-                      : 'h-2.5 w-2.5 bg-stone-600 hover:bg-stone-400',
-                  )}
-                />
-              </button>
-            ))}
-          </div>
-        )}
-      </div>
-    </section>
-  )
-}
+'use client'
+
+import React, { useState, useCallback, useEffect } from 'react'
+import Link from 'next/link'
+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 }
+
+function isValidImageSrc(src?: string | null): src is string {
+  return Boolean(src && src.startsWith('/api/media/file/'))
+}
+
+type CarouselItemA = {
+  id?: string | null
+  name: string
+  category?: string | null
+  badge?: string | null
+  image?: MediaObj | string | null
+  imageFallbackUrl?: string | null
+  description?: string | null
+  href?: string | null
+  features?: Array<{ id?: string | null; label?: string | null }> | null
+}
+
+export type DDCarouselAProps = {
+  blockType: 'DD-Carousel-A'
+  blockName?: string | null
+  eyebrow?: string | null
+  heading?: string | null
+  subtext?: string | null
+  viewAllLabel?: string | null
+  viewAllHref?: string | null
+  items?: CarouselItemA[] | null
+  sectionId?: string | null
+  customCSS?: string | null
+}
+
+export const DDCarouselA: React.FC<DDCarouselAProps> = ({
+  eyebrow,
+  heading,
+  subtext,
+  viewAllLabel = 'View All',
+  viewAllHref,
+  items: itemsProp,
+  sectionId,
+  customCSS,
+}) => {
+  const items = itemsProp ?? []
+  const [emblaRef, emblaApi] = useEmblaCarousel({
+    align: 'start',
+    slidesToScroll: 1,
+    containScroll: 'trimSnaps',
+    dragFree: false,
+  })
+  const [activeIdx, setActiveIdx] = useState(0)
+  const [canPrev, setCanPrev] = useState(false)
+  const [canNext, setCanNext] = useState(true)
+
+  const onSelect = useCallback(() => {
+    if (!emblaApi) return
+    setActiveIdx(emblaApi.selectedScrollSnap())
+    setCanPrev(emblaApi.canScrollPrev())
+    setCanNext(emblaApi.canScrollNext())
+  }, [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])
+
+  const snapCount = emblaApi?.scrollSnapList().length ?? 0
+
+  if (!items.length) return null
+
+  return (
+    <section
+      id={sectionId ?? undefined}
+      className="relative left-0 mx-auto w-screen max-w-none overflow-hidden py-20"
+    >
+      {customCSS && <style dangerouslySetInnerHTML={{ __html: customCSS }} />}
+      <div className="max-w-6xl lg:max-w-7xl mx-auto px-4 md:px-6">
+        <div className="flex flex-col md:flex-row md:items-end justify-between mb-12 gap-4 px-0 md:px-4">
+          <div>
+            {eyebrow && (
+              <div className="text-purple-600 dark:text-lime-500 text-xs font-bold uppercase tracking-widest mb-2">
+                {eyebrow}
+              </div>
+            )}
+            {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-xl">{subtext}</p>}
+          </div>
+          <div className="flex items-center gap-3 shrink-0">
+            <button
+              onClick={scrollPrev}
+              disabled={!canPrev}
+              aria-label="Previous"
+              className="w-11 h-11 flex items-center justify-center rounded-full border-2 border-white/30 text-stone-900 dark:text-stone-50 hover:border-white hover:bg-stone-50 hover:text-stone-900 transition-all disabled:opacity-30 disabled:cursor-not-allowed cursor-pointer"
+            >
+              <ChevronLeft className="w-5 h-5" />
+            </button>
+            <button
+              onClick={scrollNext}
+              disabled={!canNext}
+              aria-label="Next"
+              className="w-11 h-11 flex items-center justify-center rounded-full bg-purple-600 text-stone-50 hover:bg-purple-500 dark:bg-lime-500 dark:text-stone-900 dark:hover:bg-lime-400 transition-all disabled:opacity-30 disabled:cursor-not-allowed cursor-pointer"
+            >
+              <ChevronRight className="w-5 h-5" />
+            </button>
+            {viewAllHref && (
+              <Link
+                href={viewAllHref}
+                className="ml-2 text-sm font-semibold text-stone-600 dark:text-stone-300 hover:text-purple-600 dark:hover:text-lime-500 transition-colors whitespace-nowrap"
+              >
+                {viewAllLabel} →
+              </Link>
+            )}
+          </div>
+        </div>
+        {/* Embla viewport */}
+        <div
+          ref={emblaRef}
+          className="overflow-visible select-none cursor-grab active:cursor-grabbing"
+        >
+          <div className="flex gap-6 py-4">
+            {items.map((item, i) => {
+              const candidateImgSrc =
+                item.image && typeof item.image === 'object' && (item.image as MediaObj).url
+                  ? (item.image as MediaObj).url!
+                  : (item.imageFallbackUrl ?? '')
+              const imgSrc = isValidImageSrc(candidateImgSrc) ? candidateImgSrc : ''
+
+              return (
+                <div
+                  key={item.id ?? i}
+                  className="flex-none w-[calc(100%-0px)] sm:w-[calc(50%-12px)] lg:w-[calc(33.333%-16px)] min-w-70"
+                >
+                  <Link href={item.href ?? '#'} className="block group h-full" draggable={false}>
+                    <div className="border border-border rounded-2xl overflow-hidden hover:-translate-y-2 hover:outline-3 hover:outline-purple-500/30 dark:hover:outline-lime-500/30 hover:outline-solid hover:outline-offset-2 transition-all duration-300 hover:shadow-xl hover:border-purple-500/30 dark:hover:border-lime-500/30 h-full flex flex-col">
+                      {/* Image */}
+                      <div className="relative h-52 overflow-hidden bg-stone-900 shrink-0 ">
+                        {imgSrc ? (
+                          <Image
+                            src={imgSrc}
+                            alt={item.name}
+                            fill
+                            sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
+                            className="w-full h-full object-cover object-top group-hover:scale-105 transition-transform duration-500"
+                            draggable={false}
+                          />
+                        ) : (
+                          <div className="w-full h-full bg-linear-to-br from-violet-950 to-indigo-950" />
+                        )}
+
+                        {item.badge && (
+                          <div className="absolute top-3 left-3 bg-purple-600 text-stone-50 dark:bg-lime-500 dark:text-stone-900 text-xs font-bold px-3 py-1 rounded-full z-10">
+                            {item.badge}
+                          </div>
+                        )}
+
+                        <div className="absolute inset-0 bg-linear-to-t from-stone-900/60 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
+
+                        <div className="absolute bottom-3 left-3 right-3 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
+                          <span className="text-stone-900 dark:text-stone-50 text-sm font-semibold">
+                            View Details →
+                          </span>
+                        </div>
+                      </div>
+
+                      {/* Content */}
+                      <div className="p-5 flex flex-col flex-1">
+                        {item.category && (
+                          <div className="text-purple-600 dark:text-lime-500 text-xs font-semibold uppercase tracking-widest mb-1">
+                            {item.category}
+                          </div>
+                        )}
+
+                        <h3 className="text-stone-900 dark:text-stone-50 font-bold text-base leading-snug mb-2 line-clamp-2">
+                          {item.name}
+                        </h3>
+
+                        {item.description && (
+                          <div className="grid grid-rows-[0fr] group-hover:grid-rows-[1fr] transition-[grid-template-rows,margin] duration-300 ease-out mb-0 group-hover:mb-4">
+                            <p className="min-h-0 overflow-hidden text-stone-400 text-sm leading-relaxed line-clamp-2 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
+                              {item.description}
+                            </p>
+                          </div>
+                        )}
+
+                        {item.features && item.features.length > 0 && (
+                          <div className="flex flex-wrap gap-1.5 mt-auto">
+                            {item.features.slice(0, 3).map((f, fi) => (
+                              <span
+                                key={f.id ?? fi}
+                                className="text-xs bg-purple-500/10 text-purple-600 dark:bg-lime-500/10 dark:text-lime-400 px-2.5 py-1 rounded-full"
+                              >
+                                {f.label}
+                              </span>
+                            ))}
+                          </div>
+                        )}
+                      </div>
+                    </div>
+                  </Link>
+                </div>
+              )
+            })}
+          </div>
+        </div>
+        {/* Dot indicators */}
+        {snapCount > 1 && (
+          <div className="flex justify-center gap-2 mt-0">
+            {Array.from({ length: snapCount }).map((_, i) => (
+              <button
+                key={i}
+                onClick={() => scrollTo(i)}
+                aria-label={`Go to slide ${i + 1}`}
+                className="flex h-11 w-11 items-center justify-center rounded-full cursor-pointer"
+              >
+                <span
+                  className={cn(
+                    'block rounded-full transition-all duration-300',
+                    i === activeIdx
+                      ? 'h-2.5 w-8 bg-purple-600 dark:bg-lime-500'
+                      : 'h-2.5 w-2.5 bg-stone-600 hover:bg-stone-400',
+                  )}
+                />
+              </button>
+            ))}
+          </div>
+        )}
+      </div>
+    </section>
+  )
+}