blocks-dusted 0.1.11 → 0.1.13

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

@@ -1,147 +1,139 @@
-"use client";
-
-import React from "react";
-import Image from "next/image";
-import { Star } from "lucide-react";
-import { motion, type Variants } from "framer-motion";
-export type DDTestimonialsProps = Record<string, any>;
-type Media = { url?: string | null };
-type Testimonial = {
-  id?: string | null;
-  title?: string | null;
-  content?: unknown;
-  designation?: unknown;
-  companyLogo?: Media | string | null;
-  fallbackAvatarUrl?: string | null;
-  rating?: number | null;
-};
-
-function isLocalImageSrc(src?: string | null): src is string {
-  return typeof src === "string" && src.startsWith("/api/media/file/");
-}
-
-const containerVariants: Variants = {
-  hidden: {},
-  show: { transition: { staggerChildren: 0.12, delayChildren: 0.05 } },
-};
-
-const cardVariants: Variants = {
-  hidden: { opacity: 0, y: 24 },
-  show: { opacity: 1, y: 0, transition: { duration: 0.5, ease: "easeOut" } },
-};
-
-export const DDTestimonials: React.FC<DDTestimonialsProps> = ({
-  eyebrow,
-  headline,
-  testimonials,
-  sectionId,
-  customCSS,
-}) => {
-  const populated = ((testimonials ?? []) as unknown[]).filter(
-    (t): t is Testimonial => typeof t === "object" && t !== null,
-  );
-
-  return (
-    <>
-      {customCSS && <style dangerouslySetInnerHTML={{ __html: customCSS }} />}
-
-      <div id={sectionId ?? "testimonials"} className="py-24">
-        <div className="max-w-6xl lg:max-w-7xl mx-auto px-4 md:px-6">
-          {/* Header */}
-          <div className="text-center max-w-xl mx-auto mb-14">
-            {eyebrow && (
-              <p className="text-[11.5px] font-semibold text-stone-400 tracking-widest uppercase mb-3 top-caption">
-                {eyebrow}
-              </p>
-            )}
-            <h2 className="text-3xl font-semibold text-stone-900 dark:text-stone-50 leading-tight">
-              {headline}
-            </h2>
-          </div>
-          {/* Testimonials */}
-          {populated.length > 0 && (
-            <motion.div
-              className="grid grid-cols-1 md:grid-cols-3 gap-6"
-              variants={containerVariants}
-              initial="hidden"
-              whileInView="show"
-              viewport={{ once: false, amount: 0.15 }}
-            >
-              {populated.map((t, i) => {
-                const avatarUrl =
-                  typeof t.companyLogo === "object" &&
-                  t.companyLogo !== null &&
-                  "url" in t.companyLogo
-                    ? t.companyLogo.url
-                    : (t.fallbackAvatarUrl ?? null);
-                const safeAvatarUrl = isLocalImageSrc(avatarUrl)
-                  ? avatarUrl
-                  : null;
-
-                const stars = Math.min(5, Math.max(1, t.rating ?? 5));
-
-                return (
-                  <motion.div
-                    key={t.id ?? i}
-                    className="rounded-2xl bg-stone-100 dark:bg-stone-900 border border-stone-100 dark:border-stone-800 p-8 flex flex-col"
-                    variants={cardVariants}
-                    style={{ cornerShape: "squircle" } as React.CSSProperties}
-                  >
-                    {/* Stars */}
-                    <div className="flex items-center gap-1 mb-5">
-                      {Array.from({ length: stars }).map((_, si) => (
-                        <Star
-                          key={si}
-                          size={14}
-                          className="text-amber-400"
-                          fill="currentColor"
-                        />
-                      ))}
-                    </div>
-
-                    {/* Quote */}
-                    {t.content ? (
-                      <div className="text-sm text-stone-400 leading-relaxed flex-1 mb-6">
-                        {/* TODO: Reconnect this project's RichText renderer for testimonial content. */}
-                        <span>
-                          Reconnect this project's RichText renderer for
-                          testimonial content.
-                        </span>
-                      </div>
-                    ) : null}
-
-                    {/* Author / Company */}
-                    <div className="flex items-center gap-3 pt-5 border-t border-stone-800">
-                      {safeAvatarUrl && (
-                        <div className="w-10 h-10 rounded-full overflow-hidden shrink-0 relative">
-                          <Image
-                            src={safeAvatarUrl}
-                            alt={t.title ?? ""}
-                            fill
-                            sizes="40px"
-                            className="object-cover object-top"
-                          />
-                        </div>
-                      )}
-                      <div>
-                        <div className="text-sm font-semibold text-stone-800 dark:text-stone-50">
-                          {t.title}
-                        </div>
-                        {t.designation ? (
-                          <div className="text-xs text-stone-300">
-                            {/* TODO: Reconnect RichText for designation if needed. */}
-                            <span>Reconnect RichText for designation</span>
-                          </div>
-                        ) : null}
-                      </div>
-                    </div>
-                  </motion.div>
-                );
-              })}
-            </motion.div>
-          )}
-        </div>
-      </div>
-    </>
-  );
-};
+'use client'
+
+import React from 'react'
+import Image from 'next/image'
+import { Star } from 'lucide-react'
+import { motion, type Variants } from 'framer-motion'
+export type DDTestimonialsProps = Record<string, any>
+type Media = { url?: string | null }
+type Testimonial = {
+  id?: string | null
+  title?: string | null
+  content?: unknown
+  designation?: unknown
+  companyLogo?: Media | string | null
+  fallbackAvatarUrl?: string | null
+  rating?: number | null
+}
+
+function isLocalImageSrc(src?: string | null): src is string {
+  return typeof src === 'string' && src.startsWith('/api/media/file/')
+}
+
+const containerVariants: Variants = {
+  hidden: {},
+  show: { transition: { staggerChildren: 0.12, delayChildren: 0.05 } },
+}
+
+const cardVariants: Variants = {
+  hidden: { opacity: 0, y: 24 },
+  show: { opacity: 1, y: 0, transition: { duration: 0.5, ease: 'easeOut' } },
+}
+
+export const DDTestimonials: React.FC<DDTestimonialsProps> = ({
+  eyebrow,
+  headline,
+  testimonials,
+  sectionId,
+  customCSS,
+}) => {
+  const populated = ((testimonials ?? []) as unknown[]).filter(
+    (t): t is Testimonial => typeof t === 'object' && t !== null,
+  )
+
+  return (
+    <>
+      {customCSS && <style dangerouslySetInnerHTML={{ __html: customCSS }} />}
+
+      <div id={sectionId ?? 'testimonials'} className="py-4">
+        <div className="max-w-6xl lg:max-w-7xl mx-auto px-4 md:px-6">
+          {/* Header */}
+          <div className="text-center max-w-xl mx-auto mb-14">
+            {eyebrow && (
+              <p className="text-[11.5px] font-semibold text-stone-400 tracking-widest uppercase mb-3 top-caption">
+                {eyebrow}
+              </p>
+            )}
+            <h2 className="text-3xl font-semibold text-stone-900 dark:text-stone-50 leading-tight">
+              {headline}
+            </h2>
+          </div>
+          {/* Testimonials */}
+          {populated.length > 0 && (
+            <motion.div
+              className="grid grid-cols-1 md:grid-cols-3 gap-6"
+              variants={containerVariants}
+              initial="hidden"
+              whileInView="show"
+              viewport={{ once: false, amount: 0.15 }}
+            >
+              {populated.map((t, i) => {
+                const avatarUrl =
+                  typeof t.companyLogo === 'object' &&
+                  t.companyLogo !== null &&
+                  'url' in t.companyLogo
+                    ? t.companyLogo.url
+                    : (t.fallbackAvatarUrl ?? null)
+                const safeAvatarUrl = isLocalImageSrc(avatarUrl) ? avatarUrl : null
+
+                const stars = Math.min(5, Math.max(1, t.rating ?? 5))
+
+                return (
+                  <motion.div
+                    key={t.id ?? i}
+                    className="rounded-2xl bg-stone-100 dark:bg-stone-900 border border-stone-100 dark:border-stone-800 p-8 flex flex-col"
+                    variants={cardVariants}
+                    style={{ cornerShape: 'squircle' } as React.CSSProperties}
+                  >
+                    {/* Stars */}
+                    <div className="flex items-center gap-1 mb-5">
+                      {Array.from({ length: stars }).map((_, si) => (
+                        <Star key={si} size={14} className="text-amber-400" fill="currentColor" />
+                      ))}
+                    </div>
+
+                    {/* Quote */}
+                    {t.content ? (
+                      <div className="text-sm text-stone-400 leading-relaxed flex-1 mb-6">
+                        {/* TODO: Reconnect this project's RichText renderer for testimonial content. */}
+                        <span>
+                          Reconnect this project's RichText renderer for testimonial content.
+                        </span>
+                      </div>
+                    ) : null}
+
+                    {/* Author / Company */}
+                    <div className="flex items-center gap-3 pt-5 border-t border-stone-800">
+                      {safeAvatarUrl && (
+                        <div className="w-10 h-10 rounded-full overflow-hidden shrink-0 relative">
+                          <Image
+                            src={safeAvatarUrl}
+                            alt={t.title ?? ''}
+                            fill
+                            sizes="40px"
+                            className="object-cover object-top"
+                          />
+                        </div>
+                      )}
+                      <div>
+                        <div className="text-sm font-semibold text-stone-800 dark:text-stone-50">
+                          {t.title}
+                        </div>
+                        {t.designation ? (
+                          <div className="text-xs text-stone-300">
+                            {/* TODO: Reconnect RichText for designation if needed. */}
+                            <span>Reconnect RichText for designation</span>
+                          </div>
+                        ) : null}
+                      </div>
+                    </div>
+                  </motion.div>
+                )
+              })}
+            </motion.div>
+          )}
+        </div>
+      </div>
+    </>
+  )
+}

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

@@ -1,157 +1,157 @@
-'use client'
-
-import React from 'react'
-import { motion } from 'framer-motion'
-import { cn } from '@/utilities/ui'
-import { Separator } from '@/components/ui/separator'
-
-export interface TextMarqueeBlockProps {
-  blockType: 'textMarquee'
-  items?: Array<{
-    text: string
-    textClass?: string
-    textStyle?: React.CSSProperties
-    fontSize?: string
-    fontWeight?: string
-    color?: string
-  }>
-  speed?: number
-  spacing?: number
-  showTopDivider?: boolean
-  showBottomDivider?: boolean
-  containerClass?: string
-}
-
-export type TextMarqueeProps = {
-  texts: {
-    text: string
-    textClass?: string
-    textStyle?: React.CSSProperties
-    fontSize?: string
-    fontWeight?: string
-    color?: string
-  }[]
-  speed?: number
-  spacing?: number
-  showTopDivider?: boolean
-  showBottomDivider?: boolean
-  containerClass?: string
-}
-
-export const TextMarqueeComponent: React.FC<TextMarqueeProps> = ({
-  texts,
-  speed = 20,
-  spacing = 48,
-  showTopDivider = false,
-  showBottomDivider = false,
-  containerClass = 'overflow-hidden py-8 bg-transparent'
-}) => {
-  if (!texts || texts.length === 0) {
-    return null
-  }
-
-  // Calculate total width - simple calculation, no memoization needed
-  const totalWidth = texts.reduce((acc, text) => {
-    const textWidth = text.text.length * 12 // ~12px per character
-    return acc + textWidth + spacing
-  }, 0)
-
-  return (
-    <>
-      {showTopDivider && <Separator gradient={true} className="border-t" />}
-      <div className={containerClass}>
-        <motion.div
-          className="flex items-center whitespace-nowrap"
-          animate={{ x: [0, -totalWidth] }}
-          transition={{
-            repeat: Infinity,
-            duration: speed,
-            ease: 'linear',
-            repeatType: 'loop'
-          }}
-          style={{ width: `${totalWidth * 2}px` }}
-        >
-          {/* First set of texts */}
-          {texts.map((item, index) => (
-            <div
-              key={`text-${index}`}
-              className="flex-shrink-0 flex items-center justify-center"
-              style={{ marginRight: `${spacing}px` }}
-            >
-              <span
-                className={cn('text-base text-center whitespace-nowrap', item.textClass)}
-                style={{
-                  fontSize: item.fontSize || '1rem',
-                  fontWeight: item.fontWeight || 'normal',
-                  color: item.color || 'currentColor',
-                  ...item.textStyle
-                }}
-              >
-                {item.text}
-              </span>
-            </div>
-          ))}
-
-          {/* Duplicate set for seamless loop */}
-          {texts.map((item, index) => (
-            <div
-              key={`text-${index}-duplicate`}
-              className="flex-shrink-0 flex items-center justify-center"
-              style={{ marginRight: `${spacing}px` }}
-            >
-              <span
-                className={cn('text-base text-center whitespace-nowrap', item.textClass)}
-                style={{
-                  fontSize: item.fontSize || '1rem',
-                  fontWeight: item.fontWeight || 'normal',
-                  color: item.color || 'currentColor',
-                  ...item.textStyle
-                }}
-              >
-                {item.text}
-              </span>
-            </div>
-          ))}
-        </motion.div>
-      </div>
-      {showBottomDivider && <Separator gradient={true} className="border-b" />}
-    </>
-  )
-}
-
-// Block component that transforms props and renders the TextMarquee
-export const DDTextMarq: React.FC<TextMarqueeBlockProps> = (props) => {
-  const {
-    items = [],
-    speed = 20,
-    spacing = 48,
-    showTopDivider = false,
-    showBottomDivider = false,
-    containerClass = 'overflow-hidden py-8 bg-transparent'
-  } = props
-
-  // Transform items to match component expectations, using array index instead of id
-  const texts = items.map((item, index) => ({
-    text: item.text,
-    textClass: item.textClass,
-    textStyle: item.textStyle,
-    fontSize: item.fontSize,
-    fontWeight: item.fontWeight,
-    color: item.color
-  }))
-
-  if (texts.length === 0) {
-    return null
-  }
-
-  return (
-    <TextMarqueeComponent
-      texts={texts}
-      speed={speed}
-      spacing={spacing}
-      showTopDivider={showTopDivider}
-      showBottomDivider={showBottomDivider}
-      containerClass={containerClass}
-    />
-  )
-}
+'use client'
+
+import React from 'react'
+import { motion } from 'framer-motion'
+import { cn } from '@/utilities/ui'
+import { Separator } from '@/components/ui/separator'
+
+export interface TextMarqueeBlockProps {
+  blockType: 'textMarquee'
+  items?: Array<{
+    text: string
+    textClass?: string
+    textStyle?: React.CSSProperties
+    fontSize?: string
+    fontWeight?: string
+    color?: string
+  }>
+  speed?: number
+  spacing?: number
+  showTopDivider?: boolean
+  showBottomDivider?: boolean
+  containerClass?: string
+}
+
+export type TextMarqueeProps = {
+  texts: {
+    text: string
+    textClass?: string
+    textStyle?: React.CSSProperties
+    fontSize?: string
+    fontWeight?: string
+    color?: string
+  }[]
+  speed?: number
+  spacing?: number
+  showTopDivider?: boolean
+  showBottomDivider?: boolean
+  containerClass?: string
+}
+
+export const TextMarqueeComponent: React.FC<TextMarqueeProps> = ({
+  texts,
+  speed = 20,
+  spacing = 48,
+  showTopDivider = false,
+  showBottomDivider = false,
+  containerClass = 'overflow-hidden py-8 bg-transparent',
+}) => {
+  if (!texts || texts.length === 0) {
+    return null
+  }
+
+  // Calculate total width - simple calculation, no memoization needed
+  const totalWidth = texts.reduce((acc, text) => {
+    const textWidth = text.text.length * 12 // ~12px per character
+    return acc + textWidth + spacing
+  }, 0)
+
+  return (
+    <>
+      {showTopDivider && <Separator gradient={true} className="border-t" />}
+      <div className={cn('overflow-clip relative top-24', containerClass)}>
+        <motion.div
+          className="flex items-center whitespace-nowrap"
+          animate={{ x: [0, -totalWidth] }}
+          transition={{
+            repeat: Infinity,
+            duration: speed,
+            ease: 'linear',
+            repeatType: 'loop',
+          }}
+          style={{ width: `${totalWidth * 2}px` }}
+        >
+          {/* First set of texts */}
+          {texts.map((item, index) => (
+            <div
+              key={`text-${index}`}
+              className="shrink-0 flex items-center justify-center"
+              style={{ marginRight: `${spacing}px` }}
+            >
+              <span
+                className={cn('text-center whitespace-nowrap uppercase', item.textClass)}
+                style={{
+                  fontSize: item.fontSize || '4rem',
+                  fontWeight: item.fontWeight || 'bold',
+                  color: item.color || 'currentColor',
+                  ...item.textStyle,
+                }}
+              >
+                {item.text}
+              </span>
+            </div>
+          ))}
+
+          {/* Duplicate set for seamless loop */}
+          {texts.map((item, index) => (
+            <div
+              key={`text-${index}-duplicate`}
+              className="shrink-0 flex items-center justify-center"
+              style={{ marginRight: `${spacing}px` }}
+            >
+              <span
+                className={cn('text-center whitespace-nowrap uppercase', item.textClass)}
+                style={{
+                  fontSize: item.fontSize || '4rem',
+                  fontWeight: item.fontWeight || 'bold',
+                  color: item.color || 'currentColor',
+                  ...item.textStyle,
+                }}
+              >
+                {item.text}
+              </span>
+            </div>
+          ))}
+        </motion.div>
+      </div>
+      {showBottomDivider && <Separator gradient={true} className="border-b" />}
+    </>
+  )
+}
+
+// Block component that transforms props and renders the TextMarquee
+export const DDTextMarq: React.FC<TextMarqueeBlockProps> = (props) => {
+  const {
+    items = [],
+    speed = 20,
+    spacing = 48,
+    showTopDivider = false,
+    showBottomDivider = false,
+    containerClass = 'overflow-hidden py-8 bg-transparent',
+  } = props
+
+  // Transform items to match component expectations, using array index instead of id
+  const texts = items.map((item, index) => ({
+    text: item.text,
+    textClass: item.textClass,
+    textStyle: item.textStyle,
+    fontSize: item.fontSize,
+    fontWeight: item.fontWeight,
+    color: item.color,
+  }))
+
+  if (texts.length === 0) {
+    return null
+  }
+
+  return (
+    <TextMarqueeComponent
+      texts={texts}
+      speed={speed}
+      spacing={spacing}
+      showTopDivider={showTopDivider}
+      showBottomDivider={showBottomDivider}
+      containerClass={containerClass}
+    />
+  )
+}