blocks-dusted 0.1.1 → 0.1.2

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

@@ -1,55 +1,49 @@
-"use client";
+'use client'
 
-import React from "react";
-import Image from "next/image";
-import * as LucideIcons from "lucide-react";
-export type DDTechStackProps = Record<string, any>;
+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 MediaObj = { url?: string | null; alt?: string | null }
 type TechStackItem = {
-  image?: string | MediaObj | null;
-  icon?: string | null;
-  label?: string | null;
-  showLabel?: boolean | null;
-};
+  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;
+  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;
+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/");
+  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} />;
+}: { 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 ───────────────────────────────────────────────────────────
@@ -60,13 +54,13 @@ function TechItem({
   label,
   showLabel,
 }: {
-  imageUrl?: string | null;
-  imageAlt?: string | null;
-  icon?: string | null;
-  label?: string | null;
-  showLabel?: boolean | null;
+  imageUrl?: string | null
+  imageAlt?: string | null
+  icon?: string | null
+  label?: string | null
+  showLabel?: boolean | null
 }) {
-  const safeImageUrl = isLocalImageSrc(imageUrl) ? imageUrl : null;
+  const safeImageUrl = isLocalImageSrc(imageUrl) ? imageUrl : null
 
   return (
     <div className="relative group/tech text-center shrink-0">
@@ -74,7 +68,7 @@ function TechItem({
         {safeImageUrl ? (
           <Image
             src={safeImageUrl}
-            alt={imageAlt ?? label ?? "Tech logo"}
+            alt={imageAlt ?? label ?? 'Tech logo'}
             width={40}
             height={40}
             loading="lazy"
@@ -85,12 +79,10 @@ function TechItem({
         )}
       </div>
       {showLabel !== false && label && (
-        <span className="text-sm whitespace-nowrap text-[#9A9790] mt-2 block">
-          {label}
-        </span>
+        <span className="text-sm whitespace-nowrap text-[#9A9790] mt-2 block">{label}</span>
       )}
     </div>
-  );
+  )
 }
 
 // ─── Component ────────────────────────────────────────────────────────────────
@@ -101,15 +93,14 @@ export const DDTechStack: React.FC<DDTechStackProps> = ({
   sectionId,
   customCSS,
 }) => {
-  const rows = (techRows ?? []) as TechStackRow[];
-  if (!rows.length) return null;
+  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%)",
+    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%)",
-  };
+      'linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%)',
+  }
 
   return (
     <section
@@ -120,10 +111,9 @@ export const DDTechStack: React.FC<DDTechStackProps> = ({
 
       {(eyebrow || heading) && (
         <div className="mb-12">
+          #BlockName-DDTechStack
           {eyebrow && (
-            <p className="text-sm uppercase tracking-widest text-[#9A9790] mb-2">
-              {eyebrow}
-            </p>
+            <p className="text-sm uppercase tracking-widest text-[#9A9790] mb-2">{eyebrow}</p>
           )}
           {heading && (
             <h2
@@ -138,14 +128,14 @@ export const DDTechStack: React.FC<DDTechStackProps> = ({
 
       <div className="relative">
         {rows.map((row, rowIndex) => {
-          const duration = row.duration ?? 40;
-          const direction = row.direction ?? "left";
-          const items = row.items ?? [];
+          const duration = row.duration ?? 40
+          const direction = row.direction ?? 'left'
+          const items = row.items ?? []
 
-          if (items.length === 0) return null;
+          if (items.length === 0) return null
 
           // Quadruple items for a seamless infinite loop
-          const duplicated = [...items, ...items, ...items, ...items];
+          const duplicated = [...items, ...items, ...items, ...items]
 
           return (
             <div
@@ -157,17 +147,12 @@ export const DDTechStack: React.FC<DDTechStackProps> = ({
                 className="flex shrink-0 justify-around gap-8 flex-row animate-marquee"
                 style={{
                   animationDuration: `${duration}s`,
-                  animationDirection:
-                    direction === "right" ? "reverse" : "normal",
+                  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,
-                  );
+                  const imgUrl = getMediaUrl(item.image as string | MediaObj | null)
+                  const imgAlt = getMediaAlt(item.image as string | MediaObj | null)
                   return (
                     <TechItem
                       key={idx}
@@ -177,13 +162,13 @@ export const DDTechStack: React.FC<DDTechStackProps> = ({
                       label={item.label}
                       showLabel={item.showLabel}
                     />
-                  );
+                  )
                 })}
               </div>
             </div>
-          );
+          )
         })}
       </div>
     </section>
-  );
-};
+  )
+}

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

@@ -1,147 +1,147 @@
-"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>
-                          Rich text content is configured for this testimonial.
-                        </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>Designation content configured.</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-24">
+        <div className="max-w-6xl lg:max-w-7xl mx-auto px-4 md:px-6">
+          {/* Header */}#BlockName-DDTestimonials
+          <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>
+    </>
+  );
+};