blocks-dusted 0.1.11 → 0.1.13

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>
         )}