blocks-dusted 0.1.12 → 0.1.13

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

@@ -1,174 +1,173 @@
-'use client'
-
-import React from 'react'
-import Image from 'next/image'
-import * as LucideIcons from 'lucide-react'
-export type DDTechStackProps = Record<string, any>
-
-// ─── Types ────────────────────────────────────────────────────────────────────
-type MediaObj = { url?: string | null; alt?: string | null }
-type TechStackItem = {
-  image?: string | MediaObj | null
-  icon?: string | null
-  label?: string | null
-  showLabel?: boolean | null
-}
-type TechStackRow = {
-  duration?: number | null
-  direction?: 'left' | 'right' | null
-  items?: TechStackItem[] | null
-}
-
-function getMediaUrl(media: string | MediaObj | null | undefined): string | null {
-  if (!media) return null
-  if (typeof media === 'string') return media
-  return media.url ?? null
-}
-
-function getMediaAlt(media: string | MediaObj | null | undefined): string | null {
-  if (!media || typeof media === 'string') return null
-  return (media as MediaObj).alt ?? null
-}
-
-// ─── Dynamic Lucide Icon ──────────────────────────────────────────────────────
-function isLocalImageSrc(src?: string | null): src is string {
-  return typeof src === 'string' && src.startsWith('/api/media/file/')
-}
-
-function DynamicIcon({
-  name,
-  size = 36,
-  ...props
-}: { name?: string | null } & Omit<LucideIcons.LucideProps, 'name'>) {
-  if (!name) return null
-  const Icon = (LucideIcons as unknown as Record<string, React.FC<LucideIcons.LucideProps>>)[name]
-  if (!Icon) return null
-  return <Icon size={size} {...props} />
-}
-
-// ─── Tech Item Card ───────────────────────────────────────────────────────────
-function TechItem({
-  imageUrl,
-  imageAlt,
-  icon,
-  label,
-  showLabel,
-}: {
-  imageUrl?: string | null
-  imageAlt?: string | null
-  icon?: string | null
-  label?: string | null
-  showLabel?: boolean | null
-}) {
-  const safeImageUrl = isLocalImageSrc(imageUrl) ? imageUrl : null
-
-  return (
-    <div className="relative group/tech text-center shrink-0">
-      <div className="w-20 h-20 bg-linear-to-b from-[#1a1a1f] to-[#0f0f12] rounded-2xl p-4 transition-all duration-300 hover:scale-105 hover:shadow-[0_0_30px_rgba(140,138,132,0.15)] flex items-center justify-center border border-[#2A2A30] invert-[1] dark:invert-[0]">
-        {safeImageUrl ? (
-          <Image
-            src={safeImageUrl}
-            alt={imageAlt ?? label ?? 'Tech logo'}
-            width={40}
-            height={40}
-            loading="lazy"
-            className="object-contain w-10 h-10"
-          />
-        ) : (
-          <DynamicIcon className="text-[#9A9790]" name={icon} size={36} />
-        )}
-      </div>
-      {showLabel !== false && label && (
-        <span className="text-sm whitespace-nowrap text-[#9A9790] mt-2 block">{label}</span>
-      )}
-    </div>
-  )
-}
-
-// ─── Component ────────────────────────────────────────────────────────────────
-export const DDTechStack: React.FC<DDTechStackProps> = ({
-  eyebrow,
-  heading,
-  techRows,
-  sectionId,
-  customCSS,
-}) => {
-  const rows = (techRows ?? []) as TechStackRow[]
-  if (!rows.length) return null
-
-  const rowMaskStyle: React.CSSProperties = {
-    maskImage: 'linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%)',
-    WebkitMaskImage:
-      'linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%)',
-  }
-
-  return (
-    <section
-      id={sectionId ?? undefined}
-      className="relative w-full bg-transparent py-12 px-4 md:px-6 max-w-6xl mx-auto"
-    >
-      {customCSS && <style dangerouslySetInnerHTML={{ __html: customCSS }} />}
-
-      {(eyebrow || heading) && (
-        <div className="mb-12">
-          #BlockName-DDTechStack
-          {eyebrow && (
-            <p className="text-sm uppercase tracking-widest text-[#9A9790] mb-2">{eyebrow}</p>
-          )}
-          {heading && (
-            <h2
-              className="text-3xl font-bold tracking-tighter sm:text-4xl text-stone-900 dark:text-stone-50"
-              style={{ fontFamily: "'Space Grotesk', sans-serif" }}
-            >
-              {heading}
-            </h2>
-          )}
-        </div>
-      )}
-
-      <div className="relative">
-        {rows.map((row, rowIndex) => {
-          const duration = row.duration ?? 40
-          const direction = row.direction ?? 'left'
-          const items = row.items ?? []
-
-          if (items.length === 0) return null
-
-          // Quadruple items for a seamless infinite loop
-          const duplicated = [...items, ...items, ...items, ...items]
-
-          return (
-            <div
-              key={rowIndex}
-              className="overflow-x-hidden overflow-y-visible py-6 relative"
-              style={rowMaskStyle}
-            >
-              <div
-                className="flex shrink-0 justify-around gap-8 flex-row animate-marquee"
-                style={{
-                  animationDuration: `${duration}s`,
-                  animationDirection: direction === 'right' ? 'reverse' : 'normal',
-                }}
-              >
-                {duplicated.map((item, idx) => {
-                  const imgUrl = getMediaUrl(item.image as string | MediaObj | null)
-                  const imgAlt = getMediaAlt(item.image as string | MediaObj | null)
-                  return (
-                    <TechItem
-                      key={idx}
-                      imageUrl={imgUrl}
-                      imageAlt={imgAlt}
-                      icon={item.icon}
-                      label={item.label}
-                      showLabel={item.showLabel}
-                    />
-                  )
-                })}
-              </div>
-            </div>
-          )
-        })}
-      </div>
-    </section>
-  )
-}
+'use client'
+
+import React from 'react'
+import Image from 'next/image'
+import * as LucideIcons from 'lucide-react'
+export type DDTechStackProps = Record<string, any>
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+type MediaObj = { url?: string | null; alt?: string | null }
+type TechStackItem = {
+  image?: string | MediaObj | null
+  icon?: string | null
+  label?: string | null
+  showLabel?: boolean | null
+}
+type TechStackRow = {
+  duration?: number | null
+  direction?: 'left' | 'right' | null
+  items?: TechStackItem[] | null
+}
+
+function getMediaUrl(media: string | MediaObj | null | undefined): string | null {
+  if (!media) return null
+  if (typeof media === 'string') return media
+  return media.url ?? null
+}
+
+function getMediaAlt(media: string | MediaObj | null | undefined): string | null {
+  if (!media || typeof media === 'string') return null
+  return (media as MediaObj).alt ?? null
+}
+
+// ─── Dynamic Lucide Icon ──────────────────────────────────────────────────────
+function isLocalImageSrc(src?: string | null): src is string {
+  return typeof src === 'string' && src.startsWith('/api/media/file/')
+}
+
+function DynamicIcon({
+  name,
+  size = 36,
+  ...props
+}: { name?: string | null } & Omit<LucideIcons.LucideProps, 'name'>) {
+  if (!name) return null
+  const Icon = (LucideIcons as unknown as Record<string, React.FC<LucideIcons.LucideProps>>)[name]
+  if (!Icon) return null
+  return <Icon size={size} {...props} />
+}
+
+// ─── Tech Item Card ───────────────────────────────────────────────────────────
+function TechItem({
+  imageUrl,
+  imageAlt,
+  icon,
+  label,
+  showLabel,
+}: {
+  imageUrl?: string | null
+  imageAlt?: string | null
+  icon?: string | null
+  label?: string | null
+  showLabel?: boolean | null
+}) {
+  const safeImageUrl = isLocalImageSrc(imageUrl) ? imageUrl : null
+
+  return (
+    <div className="relative group/tech text-center shrink-0">
+      <div className="w-20 h-20 bg-linear-to-b from-[#1a1a1f] to-[#0f0f12] rounded-2xl p-4 transition-all duration-300 hover:scale-105 hover:shadow-[0_0_30px_rgba(140,138,132,0.15)] flex items-center justify-center border border-[#2A2A30] invert-[1] dark:invert-[0]">
+        {safeImageUrl ? (
+          <Image
+            src={safeImageUrl}
+            alt={imageAlt ?? label ?? 'Tech logo'}
+            width={40}
+            height={40}
+            loading="lazy"
+            className="object-contain w-10 h-10"
+          />
+        ) : (
+          <DynamicIcon className="text-[#9A9790]" name={icon} size={36} />
+        )}
+      </div>
+      {showLabel !== false && label && (
+        <span className="text-sm whitespace-nowrap text-[#9A9790] mt-2 block">{label}</span>
+      )}
+    </div>
+  )
+}
+
+// ─── Component ────────────────────────────────────────────────────────────────
+export const DDTechStack: React.FC<DDTechStackProps> = ({
+  eyebrow,
+  heading,
+  techRows,
+  sectionId,
+  customCSS,
+}) => {
+  const rows = (techRows ?? []) as TechStackRow[]
+  if (!rows.length) return null
+
+  const rowMaskStyle: React.CSSProperties = {
+    maskImage: 'linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%)',
+    WebkitMaskImage:
+      'linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%)',
+  }
+
+  return (
+    <section
+      id={sectionId ?? undefined}
+      className="relative w-full bg-transparent py-12 px-4 md:px-6 max-w-6xl mx-auto"
+    >
+      {customCSS && <style dangerouslySetInnerHTML={{ __html: customCSS }} />}
+
+      {(eyebrow || heading) && (
+        <div className="mb-12">
+          {eyebrow && (
+            <p className="text-sm uppercase tracking-widest text-[#9A9790] mb-2">{eyebrow}</p>
+          )}
+          {heading && (
+            <h2
+              className="text-3xl font-bold tracking-tighter sm:text-4xl text-stone-900 dark:text-stone-50"
+              style={{ fontFamily: "'Space Grotesk', sans-serif" }}
+            >
+              {heading}
+            </h2>
+          )}
+        </div>
+      )}
+
+      <div className="relative">
+        {rows.map((row, rowIndex) => {
+          const duration = row.duration ?? 40
+          const direction = row.direction ?? 'left'
+          const items = row.items ?? []
+
+          if (items.length === 0) return null
+
+          // Quadruple items for a seamless infinite loop
+          const duplicated = [...items, ...items, ...items, ...items]
+
+          return (
+            <div
+              key={rowIndex}
+              className="overflow-x-hidden overflow-y-visible py-6 relative"
+              style={rowMaskStyle}
+            >
+              <div
+                className="flex shrink-0 justify-around gap-8 flex-row animate-marquee"
+                style={{
+                  animationDuration: `${duration}s`,
+                  animationDirection: direction === 'right' ? 'reverse' : 'normal',
+                }}
+              >
+                {duplicated.map((item, idx) => {
+                  const imgUrl = getMediaUrl(item.image as string | MediaObj | null)
+                  const imgAlt = getMediaAlt(item.image as string | MediaObj | null)
+                  return (
+                    <TechItem
+                      key={idx}
+                      imageUrl={imgUrl}
+                      imageAlt={imgAlt}
+                      icon={item.icon}
+                      label={item.label}
+                      showLabel={item.showLabel}
+                    />
+                  )
+                })}
+              </div>
+            </div>
+          )
+        })}
+      </div>
+    </section>
+  )
+}

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

@@ -1,132 +1,158 @@
-'use client'
-
-import React from 'react'
-import { cn } from '@/utilities/ui'
-import type { Testimonial } from '@/payload-types'
-
-type TestimonialsMarqueeBlockProps = {
-  heading?: string | null
-  testimonials?: (Testimonial | string | number)[] | null
-  row1Duration?: number | null
-  row2Duration?: number | null
-  sectionId?: string | null
-  customCSS?: string | null
-}
-import RichText from '@/components/RichText/index'
-
-function TestimonialCard({ item }: { item: Testimonial }) {
-  const logo =
-    typeof item.sourceLogo === 'object' && item.sourceLogo !== null
-      ? (item.sourceLogo as { url?: string | null }).url
-      : null
-
-  return (
-    <div className="relative scale-90 -ml-2 -mr-2 h-fit max-w-sm shrink-0 cursor-pointer overflow-hidden rounded-xl border border-[#2A2A30] bg-[#1a1a1f] p-4 space-y-2.5">
-      {item.title && <h2 className="mb-2.5 text-sm font-medium text-[#8B9F6B]">{item.title}</h2>}
-
-      <div className="flex items-center gap-0">
-        <div className="flex items-center text-xs">
-          {item.ratingText && (
-            <span className="ml-0 font-medium text-[#E8E6E1]">{item.ratingText}</span>
-          )}
-          {item.date && <span className="ml-3 text-[#6B6860]">{item.date}</span>}
-        </div>
-      </div>
-
-      {item.content && (
-        <div className="text-sm text-[#9A9790]">
-          <RichText data={item.content} enableGutter={false} enableProse={false} />
-        </div>
-      )}
-
-      {logo && (
-        <img
-          alt={item.sourceLogoAlt || 'Source Logo'}
-          loading="lazy"
-          width={50}
-          height={50}
-          decoding="async"
-          src={logo}
-          className="mt-2 h-auto w-[50px] object-contain"
-        />
-      )}
-    </div>
-  )
-}
-
-function MarqueeRow({
-  items,
-  reverse = false,
-  duration = 30
-}: {
-  items: Testimonial[]
-  reverse?: boolean
-  duration?: number
-}) {
-  const duplicated = [...items, ...items, ...items, ...items]
-
-  return (
-    <div className="group flex overflow-hidden px-2 py-0 -mt-1 -mb-1 flex-row">
-      <div
-        className={cn(
-          'flex scale-90 shrink-0 justify-around gap-0 flex-row will-change-transform',
-          reverse ? 'animate-marquee-reverse' : 'animate-marquee',
-          'group-hover:[animation-play-state:paused]'
-        )}
-        style={{ animationDuration: `${duration}s` }}
-      >
-        {duplicated.map((item, idx) => (
-          <TestimonialCard key={idx} item={item} />
-        ))}
-      </div>
-    </div>
-  )
-}
-
-export const DDTestMarq: React.FC<TestimonialsMarqueeBlockProps> = (props) => {
-  const {
-    heading,
-    testimonials,
-    row1Duration = 35,
-    row2Duration = 40,
-    sectionId,
-    customCSS
-  } = props
-
-  const populated = (testimonials ?? []).filter(
-    (t: Testimonial | string | number): t is Testimonial => typeof t === 'object' && t !== null
-  )
-
-  if (populated.length === 0) return null
-
-  const midpoint = Math.ceil(populated.length / 2)
-  const row1 = populated.slice(0, midpoint)
-  const row2 = populated.slice(midpoint)
-
-  return (
-    <section id={sectionId ?? 'testimonials'} className="mx-auto max-w-8xl px-0 py-0 md:px-0">
-      {customCSS && <style dangerouslySetInnerHTML={{ __html: customCSS }} />}
-
-      {heading && (
-        <h2
-          className="max-w-5xl mx-auto mb-12 text-3xl font-bold tracking-tighter text-[#E8E6E1] sm:text-4xl"
-          style={{ fontFamily: "'Space Grotesk', sans-serif" }}
-        >
-          {heading}
-        </h2>
-      )}
-
-      <div className="relative flex w-full flex-col items-center justify-center overflow-hidden">
-        {row1.length > 0 && <MarqueeRow items={row1} duration={row1Duration ?? 35} />}
-        {row2.length > 0 && <MarqueeRow items={row2} reverse duration={row2Duration ?? 40} />}
-
-        <div className="pointer-events-none absolute inset-y-0 left-0 w-[6rem] blur-md bg-[linear-gradient(90deg,#0b0b11,#0c0b12,transparent,transparent,transparent)] mix-blend-darken" />
-        <div className="pointer-events-none absolute inset-y-0 left-0 w-[6rem] bg-[linear-gradient(90deg,#0b0b11,#0c0b12,transparent,transparent,transparent)] mix-blend-darken" />
-        <div className="pointer-events-none absolute inset-y-0 right-0 w-[6rem] blur-md bg-[linear-gradient(270deg,#09090d,#09090d,transparent,transparent,transparent)] mix-blend-darken" />
-        <div className="pointer-events-none absolute inset-y-0 right-0 w-[6rem] bg-[linear-gradient(270deg,#09090d,#09090d,transparent,transparent,transparent)] mix-blend-darken" />
-      </div>
-    </section>
-  )
-}
-
-export default DDTestMarq
+'use client'
+
+import React from 'react'
+import { cn } from '@/utilities/ui'
+import type { Testimonial } from '@/payload-types'
+
+type TestimonialsMarqueeBlockProps = {
+  heading?: string | null
+  testimonials?: (Testimonial | string | number)[] | null
+  row1Duration?: number | null
+  row2Duration?: number | null
+  sectionId?: string | null
+  customCSS?: string | null
+}
+import RichText from '@/components/RichText/index'
+
+function TestimonialCard({ item }: { item: Testimonial }) {
+  const logo =
+    typeof item.sourceLogo === 'object' && item.sourceLogo !== null
+      ? (item.sourceLogo as { url?: string | null }).url
+      : null
+
+  return (
+    <div className="relative scale-90 -ml-2 -mr-2 h-fit max-w-sm shrink-0 cursor-pointer overflow-hidden rounded-xl border border-[#2A2A30] bg-[#1a1a1f] p-4 space-y-2.5">
+      {item.title && <h2 className="mb-2.5 text-sm font-medium text-[#8B9F6B]">{item.title}</h2>}
+
+      <div className="flex items-center gap-0">
+        <div className="flex items-center text-xs">
+          {item.ratingText && (
+            <span className="ml-0 font-medium text-[#E8E6E1]">{item.ratingText}</span>
+          )}
+          {item.date && <span className="ml-3 text-[#6B6860]">{item.date}</span>}
+        </div>
+      </div>
+
+      {item.content && (
+        <div className="text-sm text-[#9A9790] [&_.payload-richtext]:!text-[#9A9790] [&_.payload-richtext_*]:!text-[#9A9790]">
+          <RichText data={item.content} enableGutter={false} enableProse={false} />
+        </div>
+      )}
+
+      {logo && (
+        <img
+          alt={item.sourceLogoAlt || 'Source Logo'}
+          loading="lazy"
+          width={50}
+          height={50}
+          decoding="async"
+          src={logo}
+          className="mt-2 h-auto w-[50px] object-contain"
+        />
+      )}
+    </div>
+  )
+}
+
+function MarqueeRow({
+  items,
+  reverse = false,
+  duration = 30,
+}: {
+  items: Testimonial[]
+  reverse?: boolean
+  duration?: number
+}) {
+  const duplicated = [...items, ...items]
+
+  return (
+    <div className="group flex w-full overflow-hidden px-0 py-0 -mt-1 -mb-1 flex-row">
+      <div
+        className={cn(
+          'dd-test-marquee-track flex w-max shrink-0 justify-around gap-0 flex-row will-change-transform',
+          reverse ? 'dd-test-marquee-reverse' : 'dd-test-marquee-forward',
+          'group-hover:[animation-play-state:paused]',
+        )}
+        style={{ '--dd-test-marquee-duration': `${duration}s` } as React.CSSProperties}
+      >
+        {duplicated.map((item, idx) => (
+          <TestimonialCard key={idx} item={item} />
+        ))}
+      </div>
+    </div>
+  )
+}
+
+export const DDTestMarq: React.FC<TestimonialsMarqueeBlockProps> = (props) => {
+  const {
+    heading,
+    testimonials,
+    row1Duration = 35,
+    row2Duration = 40,
+    sectionId,
+    customCSS,
+  } = props
+
+  const populated = (testimonials ?? []).filter(
+    (t: Testimonial | string | number): t is Testimonial => typeof t === 'object' && t !== null,
+  )
+
+  if (populated.length === 0) return null
+
+  const midpoint = Math.ceil(populated.length / 2)
+  const row1 = populated.slice(0, midpoint)
+  const row2 = populated.slice(midpoint)
+
+  return (
+    <section id={sectionId ?? 'testimonials'} className="mx-auto max-w-8xl px-0 py-0 md:px-0">
+      <style>{`
+        @keyframes ddTestMarqueeForward {
+          from { transform: translate3d(0, 0, 0); }
+          to { transform: translate3d(-50%, 0, 0); }
+        }
+        @keyframes ddTestMarqueeReverse {
+          from { transform: translate3d(-50%, 0, 0); }
+          to { transform: translate3d(0, 0, 0); }
+        }
+        .dd-test-marquee-forward {
+          animation: ddTestMarqueeForward var(--dd-test-marquee-duration) linear infinite;
+        }
+        .dd-test-marquee-reverse {
+          animation: ddTestMarqueeReverse var(--dd-test-marquee-duration) linear infinite;
+        }
+      `}</style>
+      {customCSS && <style dangerouslySetInnerHTML={{ __html: customCSS }} />}
+
+      {heading && (
+        <h2
+          className="max-w-5xl mx-auto mb-12 text-3xl font-bold tracking-tighter text-stone-900 dark:text-stone-100 sm:text-4xl"
+          style={{ fontFamily: "'Space Grotesk', sans-serif" }}
+        >
+          {heading}
+        </h2>
+      )}
+
+      <div className="relative flex w-full flex-col items-center justify-center overflow-hidden">
+        {row1.length > 0 && <MarqueeRow items={row1} duration={row1Duration ?? 35} />}
+        {row2.length > 0 && <MarqueeRow items={row2} reverse duration={row2Duration ?? 40} />}
+
+        <div
+          className="pointer-events-none absolute inset-y-0 left-0 w-24"
+          style={{
+            background:
+              'linear-gradient(90deg, var(--background) 0%, var(--background) 35%, transparent 100%)',
+          }}
+        />
+        <div
+          className="pointer-events-none absolute inset-y-0 right-0 w-24"
+          style={{
+            background:
+              'linear-gradient(270deg, var(--background) 0%, var(--background) 35%, transparent 100%)',
+          }}
+        />
+      </div>
+    </section>
+  )
+}
+
+export default DDTestMarq