blocks-dusted 0.1.0 → 0.1.2

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

@@ -1,51 +1,51 @@
-"use client";
-import React, { useRef, useState } from "react";
-import * as LucideIcons from "lucide-react";
-import { cn } from "@/utilities/ui";
-export type DDCardTemplate01Props = Record<string, any>;
+'use client'
+import React, { useRef, useState } from 'react'
+import * as LucideIcons from 'lucide-react'
+import { cn } from '@/utilities/ui'
+export type DDCardTemplate01Props = Record<string, any>
 
 // ─── SpotlightCard ────────────────────────────────────────────────────────────
 interface SpotlightCardProps {
-  children: React.ReactNode;
-  className?: string;
-  spotlightColor?: string;
-  enableTilt?: boolean;
-  style?: React.CSSProperties;
+  children: React.ReactNode
+  className?: string
+  spotlightColor?: string
+  enableTilt?: boolean
+  style?: React.CSSProperties
 }
 
 function SpotlightCard({
   children,
   className,
-  spotlightColor = "rgba(214,211,209,0.08)",
+  spotlightColor = 'rgba(214,211,209,0.08)',
   enableTilt = true,
   style,
 }: SpotlightCardProps) {
-  const cardRef = useRef<HTMLDivElement>(null);
-  const [pos, setPos] = useState<{ x: number; y: number } | null>(null);
-  const [tilt, setTilt] = useState({ rx: 0, ry: 0 });
+  const cardRef = useRef<HTMLDivElement>(null)
+  const [pos, setPos] = useState<{ x: number; y: number } | null>(null)
+  const [tilt, setTilt] = useState({ rx: 0, ry: 0 })
 
   const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
-    if (!cardRef.current) return;
-    const rect = cardRef.current.getBoundingClientRect();
-    const x = e.clientX - rect.left;
-    const y = e.clientY - rect.top;
-    setPos({ x, y });
+    if (!cardRef.current) return
+    const rect = cardRef.current.getBoundingClientRect()
+    const x = e.clientX - rect.left
+    const y = e.clientY - rect.top
+    setPos({ x, y })
     if (enableTilt) {
-      const rx = (y / rect.height - 0.5) * -10;
-      const ry = (x / rect.width - 0.5) * 10;
-      setTilt({ rx, ry });
+      const rx = (y / rect.height - 0.5) * -10
+      const ry = (x / rect.width - 0.5) * 10
+      setTilt({ rx, ry })
     }
-  };
+  }
 
   const handleMouseLeave = () => {
-    setPos(null);
-    setTilt({ rx: 0, ry: 0 });
-  };
+    setPos(null)
+    setTilt({ rx: 0, ry: 0 })
+  }
 
   return (
     <div
       ref={cardRef}
-      className={cn("relative overflow-hidden", className)}
+      className={cn('relative overflow-hidden', className)}
       onMouseMove={handleMouseMove}
       onMouseLeave={handleMouseLeave}
       style={
@@ -53,7 +53,7 @@ function SpotlightCard({
           ? {
               ...style,
               transform: `perspective(800px) rotateX(${tilt.rx}deg) rotateY(${tilt.ry}deg)`,
-              transition: "transform 0.1s ease",
+              transition: 'transform 0.1s ease',
             }
           : style
       }
@@ -68,20 +68,18 @@ function SpotlightCard({
       )}
       <div className="relative z-10">{children}</div>
     </div>
-  );
+  )
 }
 
 // ─── Dynamic Icon ─────────────────────────────────────────────────────────────
 function DynamicIcon({
   name,
   ...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 {...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 {...props} />
 }
 
 // ─── Component ────────────────────────────────────────────────────────────────
@@ -89,33 +87,31 @@ export const DDCardTemplate01: React.FC<DDCardTemplate01Props> = ({
   eyebrow,
   headline,
   description,
-  iconName = "ShieldCheck",
-  glowColor = "rgba(214,211,209,0.08)",
+  iconName = 'ShieldCheck',
+  glowColor = 'rgba(214,211,209,0.08)',
   enableTilt = true,
-  minHeight = "220px",
+  minHeight = '220px',
   className,
   sectionId,
   customCSS,
 }) => {
   return (
-    <div
-      id={sectionId ?? undefined}
-      className="spotlight-card overflow-clip py-8"
-    >
+    <div id={sectionId ?? undefined} className="spotlight-card overflow-clip py-8">
       {customCSS && <style dangerouslySetInnerHTML={{ __html: customCSS }} />}
       <SpotlightCard
         spotlightColor={glowColor ?? undefined}
         enableTilt={enableTilt ?? true}
         className={cn(
-          "border border-stone-50 dark:border-stone-950 bg-stone-100 dark:bg-stone-900 hover:shadow-2xl transition-all hover:transition-all duration-900 hover:duration-900 flex flex-col justify-between p-6 max-w-[100rem] mx-auto",
+          'border border-stone-50 dark:border-stone-950 bg-stone-100 dark:bg-stone-900 hover:shadow-2xl transition-all hover:transition-all duration-900 hover:duration-900 flex flex-col justify-between p-6 max-w-[100rem] mx-auto',
           className,
         )}
-        style={{ minHeight: minHeight ?? "220px" }}
+        style={{ minHeight: minHeight ?? '220px' }}
       >
+        #BlockName-DDCardTemplate01
         <div className="w-11 h-11 flex items-center justify-center rounded-xl border border-stone-300 text-stone-300 mb-6">
           <DynamicIcon
             className="text-stone-600 dark:text-stone-300"
-            name={iconName ?? "ShieldCheck"}
+            name={iconName ?? 'ShieldCheck'}
             size={20}
           />
         </div>
@@ -138,7 +134,7 @@ export const DDCardTemplate01: React.FC<DDCardTemplate01Props> = ({
         </div>
       </SpotlightCard>
     </div>
-  );
-};
+  )
+}
 
-export default DDCardTemplate01;
+export default DDCardTemplate01