blocks-dusted 0.1.12 → 0.1.13

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

@@ -4,13 +4,13 @@ import React from 'react'
 import { motion } from 'framer-motion'
 import Link from 'next/link'
 import { usePathname } from 'next/navigation'
+import * as LucideIcons from 'lucide-react'
 
 import { cn } from '@/utilities/ui'
-import { Media } from '@/components/Media'
 import { smoothScrollTo, isAnchorLink } from '@/utilities/smoothScroll'
 
 export type IconItem = {
-  icon?: any
+  icon?: string | null
   iconSize?: string
   customIconSize?: string
   iconClassName?: string
@@ -19,7 +19,6 @@ export type IconItem = {
   flexDirection?: 'flex-col' | 'flex-col-reverse' | 'flex-row' | 'flex-row-reverse'
   flexGap?: string
   link?: string
-  imgCustomStyle?: Record<string, any>
 }
 
 export type CustomIconBlockProps = {
@@ -28,19 +27,29 @@ export type CustomIconBlockProps = {
   icons?: IconItem[]
   className?: string
   iconGridClass?: string
-  imgCustomStyle?: React.CSSProperties
   priority?: boolean
 }
 
+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} />
+}
+
 const containerVariants = {
   hidden: { opacity: 0 },
   visible: {
     opacity: 1,
     transition: {
       staggerChildren: 0.15,
-      delayChildren: 0.1
-    }
-  }
+      delayChildren: 0.1,
+    },
+  },
 }
 
 const itemVariants = {
@@ -51,17 +60,15 @@ const itemVariants = {
     scale: 1,
     transition: {
       duration: 0.4,
-      ease: [0.4, 0, 0.2, 1] as const
-    }
-  }
+      ease: [0.4, 0, 0.2, 1] as const,
+    },
+  },
 }
 
 export const DDIcon: React.FC<CustomIconBlockProps> = ({
   blockName,
   icons = [],
   iconGridClass,
-  imgCustomStyle: blockImgStyle,
-  priority = false
 }) => {
   const pathname = usePathname()
   const hasCustomGridClass = iconGridClass && iconGridClass.trim().length > 0
@@ -103,30 +110,11 @@ export const DDIcon: React.FC<CustomIconBlockProps> = ({
       smoothScrollTo(target, {
         duration: 1,
         offsetY: 80,
-        ease: 'power2.out'
+        ease: 'power2.out',
       })
     }
   }
 
-  const extractSizeFromClass = (sizeClass: string) => {
-    const widthMatch = sizeClass.match(/w-(\d+)/)
-    const heightMatch = sizeClass.match(/h-(\d+)/)
-
-    if (widthMatch && heightMatch) {
-      const width = parseInt(widthMatch[1], 10) * 4
-      const height = parseInt(heightMatch[1], 10) * 4
-
-      return {
-        width: `${width}px`,
-        height: `${height}px`,
-        maxWidth: `${width}px`,
-        maxHeight: `${height}px`
-      }
-    }
-
-    return {}
-  }
-
   return (
     <motion.div
       initial="hidden"
@@ -138,58 +126,35 @@ export const DDIcon: React.FC<CustomIconBlockProps> = ({
       className={cn(
         'custom-icon-block',
         !hasCustomGridClass && 'grid grid-cols-3 gap-6 text-center md:grid-cols-4 lg:grid-cols-5',
-        hasCustomGridClass && iconGridClass
+        hasCustomGridClass && iconGridClass,
       )}
     >
       {icons.map((iconItem, index) => {
         if (!iconItem) return null
 
-        const iconKey = `icon-${index}${iconItem.icon?.filename ? `-${iconItem.icon.filename}` : ''}`
-
-        if (!iconItem.icon) {
-          return (
-            <motion.div
-              key={iconKey}
-              variants={itemVariants}
-              className="flex flex-col items-center"
-            >
-              <div className="flex h-16 w-16 items-center justify-center border-2 border-gray-300 bg-gray-100 p-0 text-xs text-gray-400">
-                <span>No Icon</span>
-              </div>
-
-              {iconItem.label && (
-                <span className="custom-icon-label mt-2 text-center text-xs leading-tight text-gray-600">
-                  {iconItem.label}
-                </span>
-              )}
-            </motion.div>
-          )
-        }
-
-        const iconSizeClass =
-          iconItem.iconSize === 'custom'
-            ? iconItem.customIconSize || 'h-16 w-16'
-            : iconItem.iconSize || 'h-16 w-16'
-
-        const sizeStyles = extractSizeFromClass(iconSizeClass)
+        const iconKey = `icon-${index}`
+        const defaultIcons = [
+          'Code2',
+          'Database',
+          'PanelsTopLeft',
+          'Braces',
+          'Workflow',
+          'GitBranch',
+        ]
+        const iconName =
+          typeof iconItem.icon === 'string'
+            ? iconItem.icon
+            : defaultIcons[index % defaultIcons.length]
 
         const mediaContent = (
-          <Media
-            priority={priority ?? false}
-            resource={iconItem.icon}
+          <div
             className={cn(
-              'custom-icon-media flex items-center justify-center p-0 transition-transform',
-              '[&>picture]:!mb-0 [&>picture]:!mt-0 [&>picture]:flex [&>picture]:h-full [&>picture]:w-full [&>picture]:items-center [&>picture]:justify-center',
-              '[&>picture>img]:block [&>picture>img]:h-full [&>picture>img]:w-full [&>picture>img]:object-contain',
-              '[&_img]:block [&_img]:h-full [&_img]:w-full [&_img]:object-contain',
-              iconSizeClass,
-              iconItem.iconClassName
+              'custom-icon-media flex h-20 w-20 items-center justify-center rounded-2xl border border-[#2A2A30] bg-linear-to-b from-[#1a1a1f] to-[#0f0f12] p-4 invert-[1] transition-all duration-300 hover:scale-105 hover:shadow-[0_0_30px_rgba(140,138,132,0.15)] dark:invert-[0]',
+              iconItem.iconClassName,
             )}
-            imgClassName={cn(
-              'block h-full w-full object-contain transition-all duration-300',
-              iconItem.iconClassName
-            )}
-          />
+          >
+            <DynamicIcon className="text-[#9A9790]" name={iconName} size={36} />
+          </div>
         )
 
         const wrapperFlexDirection = iconItem.flexDirection || 'flex-col'
@@ -217,7 +182,7 @@ export const DDIcon: React.FC<CustomIconBlockProps> = ({
             className={cn(
               'custom-icon-item group flex items-center',
               wrapperFlexDirection,
-              wrapperGap
+              wrapperGap,
             )}
           >
             {iconItem.link && iconItem.link.trim() ? (
@@ -235,9 +200,9 @@ export const DDIcon: React.FC<CustomIconBlockProps> = ({
                     <a
                       href={href}
                       className={cn(
-                        'custom-icon-block-link custom-icon-link flex cursor-pointer items-center brightness-100 transition-all duration-300 ease-in-out hover:brightness-110',
+                        'custom-icon-block-link custom-icon-link flex cursor-pointer items-center brightness-100 no-underline transition-all duration-300 ease-in-out hover:brightness-110 hover:no-underline',
                         wrapperFlexDirection,
-                        wrapperGap
+                        wrapperGap,
                       )}
                       onClick={(e) => handleClick(href, e)}
                       aria-label={iconItem.label || 'Navigate to section'}
@@ -254,9 +219,9 @@ export const DDIcon: React.FC<CustomIconBlockProps> = ({
                   <Link
                     href={href}
                     className={cn(
-                      'custom-icon-block-link custom-icon-link flex items-center brightness-100 transition-all duration-300 ease-in-out hover:brightness-110',
+                      'custom-icon-block-link custom-icon-link flex items-center brightness-100 no-underline transition-all duration-300 ease-in-out hover:brightness-110 hover:no-underline',
                       wrapperFlexDirection,
-                      wrapperGap
+                      wrapperGap,
                     )}
                     target={target}
                     rel={rel}
@@ -271,7 +236,7 @@ export const DDIcon: React.FC<CustomIconBlockProps> = ({
                 className={cn(
                   'custom-icon-wrapper flex items-center brightness-110 text-white/80 dark:text-stone-200/80',
                   wrapperFlexDirection,
-                  wrapperGap
+                  wrapperGap,
                 )}
               >
                 {iconContent}

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

@@ -4,7 +4,7 @@ import React from 'react'
 import { cn } from '@/utilities/ui'
 import Link from 'next/link'
 import * as LucideIcons from 'lucide-react'
-import type { Page, Post } from '@/payload-types'
+import type { Page } from '@/payload-types'
 import { ShareButton } from '@/components/ui/ShareButton'
 import { smoothScrollTo, isAnchorLink } from '@/utilities/smoothScroll'
 import { usePathname, useRouter } from 'next/navigation'
@@ -30,9 +30,7 @@ type ButtonStyle =
 type ButtonSize = 'small' | 'medium' | 'large'
 type IconPosition = 'before' | 'after'
 
-type LinkReference =
-  | { relationTo: 'pages'; value: number | Page }
-  | { relationTo: 'posts'; value: number | Post }
+type LinkReference = { relationTo: 'pages'; value: number | Page }
 
 export type LinkType = {
   type?: 'reference' | 'custom' | null
@@ -175,12 +173,7 @@ export const DDIconButton: React.FC<ButtonWithIconProps> = ({
     onToggle?.()
   }
 
-  const getDocumentSlug = (doc: Page | Post | number): string | null => {
-    if (typeof doc === 'number') return null
-    return (doc as any)?.slug || null
-  }
-
-  const getPageURLFromDoc = (doc: Page | number): string | null => {
+    const getPageURLFromDoc = (doc: Page | number): string | null => {
     if (typeof doc === 'number') return null
 
     const anyDoc = doc as any
@@ -231,12 +224,6 @@ export const DDIconButton: React.FC<ButtonWithIconProps> = ({
       if (relationTo === 'pages') {
         const pageHref = getPageURLFromDoc(value as Page | number)
         if (pageHref) href = pageHref
-      } else if (relationTo === 'posts') {
-        const slug = getDocumentSlug(value as Post | number)
-        if (slug) href = `/thoughts/${slug}`
-      } else {
-        const slug = getDocumentSlug(value as any)
-        if (slug) href = `/${relationTo}/${slug}`
       }
 
       target = link.newTab ? '_blank' : undefined
@@ -267,7 +254,7 @@ export const DDIconButton: React.FC<ButtonWithIconProps> = ({
       'bg-transparent text-[var(--text)] !border-0 max-h-fit transition-all duration-300 hover:text-[var(--accent)] hover:font-medium',
 
     destructive:
-      "relative z-0 overflow-hidden bg-[var(--error)] !text-white rounded-2xl squircle border border-[outset] border-[var(--color-alt2)] brightness-100 max-h-fit shadow-[inset_0_0_20px_2px_rgb(73_17_10_/_90%),var(--shadow-md)] transition-all duration-300 before:content-[''] before:absolute before:inset-0 before:-z-10 before:bg-[url('/assets/svg/lines.svg')] before:bg-[length:10px_10px] before:bg-repeat before:opacity-100 before:pointer-events-none hover:!text-white hover:shadow-[inset_0_0_30px_2px_rgb(178_20_2),var(--shadow-xl)] hover:brightness-110",
+      "relative z-0 overflow-hidden bg-[var(--error)] !text-white rounded-2xl squircle border border-[outset] border-[var(--color-alt2)] brightness-100 max-h-fit shadow-[inset_0_0_20px_2px_rgb(73_17_10_/_90%),var(--shadow-md)] transition-all duration-300 before:content-[''] before:absolute before:inset-0 before:-z-10 before:bg-lines before:bg-[length:10px_10px] before:bg-repeat before:opacity-100 before:pointer-events-none hover:!text-white hover:shadow-[inset_0_0_30px_2px_rgb(178_20_2),var(--shadow-xl)] hover:brightness-110",
 
     v1: 'border-[0.5px] rounded-sm bg-transparent duration-200 bg-blur shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] active:shadow-none border-stone-800 text-zinc-800 dark:border-stone-600 dark:shadow-[3px_3px_0px_0px_rgba(255,255,255,0.7)] active:dark:shadow-none dark:text-zinc-50 dark:bg-zinc-950 px-3 py-1',
     v2: 'group relative justify-center rounded-sm shadow-md overflow-hidden ease-in-out hover:scale-100 hover:shadow-lg text-zinc-50 bg-gradient-to-tr from-zinc-900 to-zinc-700 hover:shadow-zinc-500/30 dark:text-stone-900 dark:bg-gradient-to-tr dark:from-zinc-50 dark:to-zinc-100 dark:hover:shadow-zinc-700/30 px-3 py-1',
@@ -444,12 +431,18 @@ export const DDIconButton: React.FC<ButtonWithIconProps> = ({
       {displayMode === 'share' ? (
         content
       ) : href && href !== '#' ? (
-        <Link href={href} target={target} rel={rel} onClick={(e) => handleClick(href, e)}>
+        <Link
+          href={href}
+          target={target}
+          rel={rel}
+          className="!no-underline hover:!no-underline"
+          onClick={(e) => handleClick(href, e)}
+        >
           {content}
         </Link>
       ) : (
         content
       )}
     </div>
-  )
-}
+  )
+}

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

@@ -1,21 +1,22 @@
-import React from 'react'
-
-type Props = {
-  idTag: string
-  offset?: number
-}
-
-export const DDIdTag: React.FC<Props> = ({ idTag, offset = 0 }) => {
-  return (
-    <div
-      id={idTag}
-      style={{
-        position: 'relative',
-        top: `-${offset}px`,
-        height: 0,
-        visibility: 'hidden',
-      }}
-      aria-hidden="true"
-    />
-  )
-}
+import React from 'react'
+
+type Props = {
+  idTag?: string
+  id?: string
+  offset?: number
+}
+
+export const DDIdTag: React.FC<Props> = ({ idTag, id, offset = 0 }) => {
+  return (
+    <div
+      id={idTag || id}
+      style={{
+        position: 'relative',
+        top: `-${offset}px`,
+        height: 0,
+        visibility: 'hidden',
+      }}
+      aria-hidden="true"
+    />
+  )
+}

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

@@ -1,36 +1,42 @@
-'use client'
-import React from 'react'
-import LineAnim from '@/components/ui/anims/LineAnims'
-
-export interface LineAnimBlockProps {
-  className?: string
-  direction?: 'left-to-right' | 'right-to-left' | 'top-to-bottom' | 'bottom-to-top'
-  trigger?: 'scroll' | 'immediate'
-  duration?: number
-  delay?: number
-  customClass?: string
-  blockType?: string
-  id?: string
-}
-
-export const DDLineAnim: React.FC<LineAnimBlockProps> = ({
-  className = '',
-  direction = 'left-to-right',
-  trigger = 'scroll',
-  duration = 1,
-  delay = 0,
-  customClass = '',
-  id
-}) => {
-  return (
-    <div className={`line-anim-block overflow-hidden ${className} ${customClass}`} id={id}>
-      <LineAnim
-        direction={direction}
-        trigger={trigger}
-        duration={duration}
-        delay={delay}
-        className="bg-gradient-to-r from-gray-400 to-gray-600"
-      />
-    </div>
-  )
-}
+'use client'
+import React from 'react'
+import LineAnim from '@/components/ui/anims/LineAnims'
+
+export interface LineAnimBlockProps {
+  className?: string
+  direction?: 'left-to-right' | 'right-to-left' | 'top-to-bottom' | 'bottom-to-top'
+  trigger?: 'scroll' | 'immediate'
+  duration?: number
+  delay?: number
+  customClass?: string
+  blockType?: string
+  id?: string
+}
+
+export const DDLineAnim: React.FC<LineAnimBlockProps> = ({
+  className = '',
+  direction = 'left-to-right',
+  trigger = 'scroll',
+  duration = 1,
+  delay = 0,
+  customClass = '',
+  id
+}) => {
+  return (
+    <div
+      className={`line-anim-block flex min-h-[55vh] items-center overflow-hidden rounded-md bg-zinc-100 px-8 dark:bg-zinc-900 ${className} ${customClass}`}
+      id={id}
+    >
+      <span className="mr-6 text-sm font-medium uppercase tracking-wide text-zinc-600 dark:text-zinc-300">
+        Line animation
+      </span>
+      <LineAnim
+        direction={direction}
+        trigger={trigger}
+        duration={duration}
+        delay={delay}
+        className="h-2 w-full rounded-full bg-gradient-to-r from-gray-400 via-gray-700 to-gray-400"
+      />
+    </div>
+  )
+}

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

@@ -1,16 +1,10 @@
 'use client'
 
-import React, { useMemo, useState } from 'react'
-import Image from 'next/image'
+import React, { useMemo } from 'react'
+import * as LucideIcons from 'lucide-react'
 import { cn } from '@/utilities/ui'
 import { Separator } from '@/components/ui/separator'
 
-const placeholderBlur =
-  'data:image/svg+xml;base64,' +
-  btoa(
-    '<svg width="160" height="80" xmlns="http://www.w3.org/2000/svg"><rect width="100%" height="100%" fill="transparent"/></svg>'
-  )
-
 export type LogoMarqueeProps = {
   logos: {
     image?: {
@@ -20,6 +14,9 @@ export type LogoMarqueeProps = {
     imageClass?: string
     imageStyle?: React.CSSProperties
     imageAltClass?: string
+    icon?: string | null
+    label?: string | null
+    showLabel?: boolean | null
   }[]
   speed?: number
   spacing?: number
@@ -30,29 +27,15 @@ export type LogoMarqueeProps = {
   customCSS?: string
 }
 
-const LogoImage: React.FC<{
-  src: string
-  alt?: string
-  customClass?: string
-  imageStyle?: React.CSSProperties
-}> = ({ src, alt, customClass, imageStyle }) => {
-  const [imageError, setImageError] = useState(false)
-  const imageSrc = !src || imageError ? placeholderBlur : src
-
-  return (
-    <Image
-      src={imageSrc}
-      alt={alt || 'Logo'}
-      width={160}
-      height={72}
-      priority
-      className={cn('h-14 w-auto max-w-[140px] object-contain', customClass)}
-      style={imageStyle}
-      onError={() => setImageError(true)}
-      placeholder="blur"
-      blurDataURL={placeholderBlur}
-    />
-  )
+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} />
 }
 
 export const DDLogoMarq: React.FC<LogoMarqueeProps> = ({
@@ -63,7 +46,7 @@ export const DDLogoMarq: React.FC<LogoMarqueeProps> = ({
   showBottomDivider = false,
   containerClass = 'py-8',
   customCSS,
-  itemWidth = 190
+  itemWidth = 190,
 }) => {
   const validLogos = logos || []
   const marqueeItems = useMemo(() => {
@@ -75,11 +58,12 @@ export const DDLogoMarq: React.FC<LogoMarqueeProps> = ({
   if (marqueeItems.length === 0) return null
 
   const gap = Math.max(16, spacing)
+  const defaultIcons = ['Code2', 'Database', 'PanelsTopLeft', 'Braces', 'Workflow', 'GitBranch']
 
   const LogoTile = ({
     logo,
     index,
-    duplicate = false
+    duplicate = false,
   }: {
     logo: (typeof marqueeItems)[number]
     index: number
@@ -87,18 +71,24 @@ export const DDLogoMarq: React.FC<LogoMarqueeProps> = ({
   }) => (
     <div
       key={(duplicate ? 'duplicate' : 'logo') + '-' + index}
-      className="marquee-logo-tile flex shrink-0 flex-col items-center justify-center rounded-2xl border border-white/10 bg-white/[0.035] px-5 py-4 shadow-[inset_0_1px_0_rgba(255,255,255,0.08)] backdrop-blur-sm"
+      className="marquee-logo-tile flex shrink-0 flex-col items-center justify-center"
       style={{ width: itemWidth }}
     >
-      <LogoImage
-        src={logo.image?.url || placeholderBlur}
-        alt={logo.image?.alt}
-        customClass={logo.imageClass}
-        imageStyle={logo.imageStyle}
-      />
-      {logo.image?.alt && (
-        <p className={cn('mt-3 text-center text-sm font-medium leading-tight text-white/80', logo.imageAltClass)}>
-          {logo.image.alt}
+      <div className="flex h-20 w-20 items-center justify-center rounded-2xl border border-[#2A2A30] bg-linear-to-b from-[#1a1a1f] to-[#0f0f12] p-4 invert-[1] transition-all duration-300 hover:scale-105 hover:shadow-[0_0_30px_rgba(140,138,132,0.15)] dark:invert-[0]">
+        <DynamicIcon
+          className="text-[#9A9790]"
+          name={logo.icon || defaultIcons[index % defaultIcons.length]}
+          size={36}
+        />
+      </div>
+      {logo.showLabel !== false && (logo.label || logo.image?.alt) && (
+        <p
+          className={cn(
+            'mt-2 text-center text-sm leading-tight text-[#9A9790]',
+            logo.imageAltClass,
+          )}
+        >
+          {logo.label || logo.image?.alt}
         </p>
       )}
     </div>
@@ -109,11 +99,11 @@ export const DDLogoMarq: React.FC<LogoMarqueeProps> = ({
       {showTopDivider && <Separator gradient className="border-seperator" />}
       <section className="logo-marquee-block mx-auto flex min-h-[280px] w-full max-w-6xl items-center overflow-hidden">
         {customCSS && <style dangerouslySetInnerHTML={{ __html: customCSS }} />}
-        <style>{
-          '@keyframes dd-logo-marquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }' +
-          '.logo-marquee-track { animation: dd-logo-marquee var(--dd-logo-marquee-speed) linear infinite; }' +
-          '.logo-marquee-block:hover .logo-marquee-track { animation-play-state: paused; }'
-        }</style>
+        <style>
+          {'@keyframes dd-logo-marquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }' +
+            '.logo-marquee-track { animation: dd-logo-marquee var(--dd-logo-marquee-speed) linear infinite; }' +
+            '.logo-marquee-block:hover .logo-marquee-track { animation-play-state: paused; }'}
+        </style>
         <div className={cn('relative w-full overflow-hidden', containerClass)}>
           <div
             className="logo-marquee-track flex w-max items-center"

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

@@ -343,6 +343,14 @@ const LottieBlockComponent: React.FC<LottieBlockProps> = ({
     }
   }
 
+  if (!fileUrl) {
+    return (
+      <div className={cn(lottieBaseClass, 'flex min-h-[220px] min-w-[320px] items-center justify-center rounded-md border border-border bg-card p-8 text-center text-sm text-muted-foreground', containerClass)}>
+        Lottie animation placeholder
+      </div>
+    )
+  }
+
   const containerStyles: React.CSSProperties = {
     width: width || 'auto',
     height: height || 'auto',
@@ -424,7 +432,7 @@ const LottieBlockComponent: React.FC<LottieBlockProps> = ({
               aria-label="Play animation"
               type="button"
             >
-              ▶️
+              ▶️
             </button>
             <button
               onClick={handlePause}
@@ -432,7 +440,7 @@ const LottieBlockComponent: React.FC<LottieBlockProps> = ({
               aria-label="Pause animation"
               type="button"
             >
-              ⏸️
+              ⏸️
             </button>
             <button
               onClick={handleStop}
@@ -440,7 +448,7 @@ const LottieBlockComponent: React.FC<LottieBlockProps> = ({
               aria-label="Stop animation"
               type="button"
             >
-              ⏹️
+              ⏹️
             </button>
           </div>
         )}