blocks-dusted 0.1.10 → 0.1.11

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

@@ -1,174 +1,180 @@
-'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 }
+'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
-}
+  iconName?: 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 ────────────────────────────────────────────────────────────────
+  speed?: 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/') || src.startsWith('/assets/') || src.startsWith('/logo') || src.startsWith('data:'))
+}
+
+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] ">
+        {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,
+  headlineMain,
+  headlineAccent,
   techRows,
+  rows: legacyRows,
   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>
-  )
-}
+  const resolvedHeading = heading ?? [headlineMain, headlineAccent].filter(Boolean).join(' ')
+  const rows = (techRows ?? legacyRows ?? []) 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 mx-auto w-full max-w-6xl bg-transparent px-4 py-10 md:px-6"
+    >
+      {customCSS && <style dangerouslySetInnerHTML={{ __html: customCSS }} />}
+
+      {(eyebrow || resolvedHeading) && (
+        <div className="mb-12">
+          
+          {eyebrow && (
+            <p className="text-sm uppercase tracking-widest text-[#9A9790] mb-2">{eyebrow}</p>
+          )}
+          {resolvedHeading && (
+            <h2
+              className="text-3xl font-bold tracking-tighter sm:text-4xl text-stone-900 dark:text-stone-50"
+              style={{ fontFamily: "'Space Grotesk', sans-serif" }}
+            >
+              {resolvedHeading}
+            </h2>
+          )}
+        </div>
+      )}
+
+      <div className="relative">
+        {rows.map((row, rowIndex) => {
+          const duration = row.duration ?? row.speed ?? 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 ?? item.iconName}
+                      label={item.label}
+                      showLabel={item.showLabel}
+                    />
+                  )
+                })}
+              </div>
+            </div>
+          )
+        })}
+      </div>
+    </section>
+  )
+}

package/templates/blocks/DD-TechStack/config.ts

@@ -1,153 +1,153 @@
-import type { Block } from 'payload'
-import { iconPicker } from '@/fields/lucide-icon-picker/field'
-
-export const DDTechStack: Block = {
-  slug: 'DD-TechStack',
-  interfaceName: 'DDTechStack',
-  labels: {
-    singular: 'Tech Stack',
-    plural: 'Tech Stacks'
-  },
-  fields: [
-    {
-      type: 'tabs',
-      tabs: [
-        {
-          label: 'Header',
-          fields: [
-            {
-              name: 'eyebrow',
-              type: 'text',
-              label: 'Eyebrow Label',
-              admin: { description: 'Small text above the heading (e.g. "Our Stack")' }
-            },
-            {
-              name: 'heading',
-              type: 'text',
-              label: 'Heading',
-              defaultValue: 'Technology Stack',
-              admin: { description: 'Main section heading. Leave blank to hide.' }
-            }
-          ]
-        },
-        {
-          label: 'Rows',
-          fields: [
-            {
-              name: 'techRows',
-              type: 'array',
-              label: 'Tech Rows',
-              minRows: 1,
-              maxRows: 3,
-              admin: {
-                description: 'Up to 3 independently scrolling rows of tech stack items.'
-              },
-              fields: [
-                {
-                  type: 'row',
-                  fields: [
-                    {
-                      name: 'direction',
-                      type: 'select',
-                      label: 'Scroll Direction',
-                      defaultValue: 'left',
-                      options: [
-                        { label: '← Left', value: 'left' },
-                        { label: '→ Right', value: 'right' }
-                      ],
-                      admin: { width: '50%' }
-                    },
-                    {
-                      name: 'duration',
-                      type: 'number',
-                      label: 'Duration (seconds)',
-                      defaultValue: 40,
-                      min: 5,
-                      max: 180,
-                      admin: {
-                        description: 'Scroll cycle time — lower = faster.',
-                        width: '50%'
-                      }
-                    }
-                  ]
-                },
-                {
-                  name: 'items',
-                  type: 'array',
-                  label: 'Tech Items',
-                  minRows: 1,
-                  admin: {
-                    description:
-                      'Each item shows a logo image or Lucide icon with an optional label. Upload takes priority over icon.'
-                  },
-                  fields: [
-                    {
-                      name: 'image',
-                      type: 'upload',
-                      label: 'Custom Logo',
-                      relationTo: 'media',
-                      admin: {
-                        description:
-                          'Upload SVG, PNG, JPG, WebP, or GIF. Takes priority over the Lucide icon.'
-                      }
-                    },
-                    {
-                      type: 'row',
-                      fields: [
-                        iconPicker({
-                          name: 'icon',
-                          required: false,
-                          description: 'Fallback if no logo is uploaded (e.g. Code2, Database)',
-                          overrides: (field) => ({
-                            ...field,
-                            label: 'Lucide Icon (fallback)',
-                            admin: { ...field.admin, width: '40%' }
-                          })
-                        }),
-                        {
-                          name: 'label',
-                          type: 'text',
-                          label: 'Label',
-                          admin: {
-                            description: 'e.g. "React", "TypeScript"',
-                            width: '40%'
-                          }
-                        },
-                        {
-                          name: 'showLabel',
-                          type: 'checkbox',
-                          label: 'Show Label',
-                          defaultValue: true,
-                          admin: { width: '20%' }
-                        }
-                      ]
-                    }
-                  ]
-                }
-              ]
-            }
-          ]
-        },
-        {
-          label: 'Settings',
-          fields: [
-            {
-              name: 'sectionId',
-              type: 'text',
-              label: 'Section ID',
-              admin: {
-                description: 'Unique ID for anchor linking (e.g. "tech-stack")'
-              }
-            },
-            {
-              name: 'customCSS',
-              type: 'code',
-              label: 'Custom CSS',
-              admin: { language: 'css' }
-            }
-          ]
-        }
-      ]
-    }
-  ]
-}
+import type { Block } from 'payload'
+import { iconPicker } from '@/fields/lucide-icon-picker/field'
+
+export const DDTechStack: Block = {
+  slug: 'DD-TechStack',
+  interfaceName: 'DDTechStack',
+  labels: {
+    singular: 'Tech Stack',
+    plural: 'Tech Stacks'
+  },
+  fields: [
+    {
+      type: 'tabs',
+      tabs: [
+        {
+          label: 'Header',
+          fields: [
+            {
+              name: 'eyebrow',
+              type: 'text',
+              label: 'Eyebrow Label',
+              admin: { description: 'Small text above the heading (e.g. "Our Stack")' }
+            },
+            {
+              name: 'heading',
+              type: 'text',
+              label: 'Heading',
+              defaultValue: 'Technology Stack',
+              admin: { description: 'Main section heading. Leave blank to hide.' }
+            }
+          ]
+        },
+        {
+          label: 'Rows',
+          fields: [
+            {
+              name: 'techRows',
+              type: 'array',
+              label: 'Tech Rows',
+              minRows: 1,
+              maxRows: 3,
+              admin: {
+                description: 'Up to 3 independently scrolling rows of tech stack items.'
+              },
+              fields: [
+                {
+                  type: 'row',
+                  fields: [
+                    {
+                      name: 'direction',
+                      type: 'select',
+                      label: 'Scroll Direction',
+                      defaultValue: 'left',
+                      options: [
+                        { label: '← Left', value: 'left' },
+                        { label: '→ Right', value: 'right' }
+                      ],
+                      admin: { width: '50%' }
+                    },
+                    {
+                      name: 'duration',
+                      type: 'number',
+                      label: 'Duration (seconds)',
+                      defaultValue: 40,
+                      min: 5,
+                      max: 180,
+                      admin: {
+                        description: 'Scroll cycle time — lower = faster.',
+                        width: '50%'
+                      }
+                    }
+                  ]
+                },
+                {
+                  name: 'items',
+                  type: 'array',
+                  label: 'Tech Items',
+                  minRows: 1,
+                  admin: {
+                    description:
+                      'Each item shows a logo image or Lucide icon with an optional label. Upload takes priority over icon.'
+                  },
+                  fields: [
+                    {
+                      name: 'image',
+                      type: 'upload',
+                      label: 'Custom Logo',
+                      relationTo: 'media',
+                      admin: {
+                        description:
+                          'Upload SVG, PNG, JPG, WebP, or GIF. Takes priority over the Lucide icon.'
+                      }
+                    },
+                    {
+                      type: 'row',
+                      fields: [
+                        iconPicker({
+                          name: 'icon',
+                          required: false,
+                          description: 'Fallback if no logo is uploaded (e.g. Code2, Database)',
+                          overrides: (field) => ({
+                            ...field,
+                            label: 'Lucide Icon (fallback)',
+                            admin: { ...field.admin, width: '40%' }
+                          })
+                        }),
+                        {
+                          name: 'label',
+                          type: 'text',
+                          label: 'Label',
+                          admin: {
+                            description: 'e.g. "React", "TypeScript"',
+                            width: '40%'
+                          }
+                        },
+                        {
+                          name: 'showLabel',
+                          type: 'checkbox',
+                          label: 'Show Label',
+                          defaultValue: true,
+                          admin: { width: '20%' }
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        },
+        {
+          label: 'Settings',
+          fields: [
+            {
+              name: 'sectionId',
+              type: 'text',
+              label: 'Section ID',
+              admin: {
+                description: 'Unique ID for anchor linking (e.g. "tech-stack")'
+              }
+            },
+            {
+              name: 'customCSS',
+              type: 'code',
+              label: 'Custom CSS',
+              admin: { language: 'css' }
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}