blocks-dusted 0.1.0 → 0.1.2

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

@@ -1,328 +1,315 @@
-/* eslint-disable @next/next/no-img-element */
-"use client";
-
-import React, { useRef, useState } from "react";
-import Image from "next/image";
-import { BarChart2, ExternalLink } from "lucide-react";
-import { motion, type Variants } from "framer-motion";
-
-import { cn } from "@/utilities/ui";
-export type DDWorkProps = Record<string, any>;
-type Media = { url?: string | null; alt?: string | null; [key: string]: any };
-type CategoryItem = { id?: string | null; label?: string | null };
-type TagItem = { id?: string | null; tag?: string | null };
-type ProjectItem = {
-  id?: string | null;
-  title?: string | null;
-  category?: string | null;
-  description?: string | null;
-  highlight?: string | null;
-  year?: string | null;
-  image?: Media | string | null;
-  imageFallbackUrl?: string | null;
-  tags?: TagItem[] | null;
-  link?: string | null;
-};
-
-function isLocalImageSrc(src?: string | null): src is string {
-  return typeof src === "string" && src.startsWith("/api/media/file/");
-}
-
-// ─── SpotlightCard ────────────────────────────────────────────────────────────
-interface SpotlightCardProps {
-  children: React.ReactNode;
-  className?: string;
-  spotlightColor?: string;
-}
-
-function SpotlightCard({
-  children,
-  className,
-  spotlightColor = "rgba(214,211,209,0.08)",
-}: SpotlightCardProps) {
-  const cardRef = useRef<HTMLDivElement>(null);
-  const [pos, setPos] = useState<{ x: number; y: number } | null>(null);
-
-  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
-    if (!cardRef.current) return;
-
-    const rect = cardRef.current.getBoundingClientRect();
-
-    setPos({
-      x: e.clientX - rect.left,
-      y: e.clientY - rect.top,
-    });
-  };
-
-  const handleMouseLeave = () => setPos(null);
-
-  return (
-    <div
-      ref={cardRef}
-      className={cn("relative overflow-hidden", className)}
-      onMouseMove={handleMouseMove}
-      onMouseLeave={handleMouseLeave}
-    >
-      {pos && (
-        <div
-          className="pointer-events-none absolute inset-0 z-0 transition-opacity duration-300"
-          style={{
-            background: `radial-gradient(400px circle at ${pos.x}px ${pos.y}px, ${spotlightColor}, transparent 60%)`,
-          }}
-        />
-      )}
-
-      <div className="relative z-10">{children}</div>
-    </div>
-  );
-}
-
-// ─── Animation variants ───────────────────────────────────────────────────────
-const containerVariants: Variants = {
-  hidden: {},
-  show: {
-    transition: {
-      staggerChildren: 0.1,
-      delayChildren: 0.05,
-    },
-  },
-};
-
-const itemVariants: Variants = {
-  hidden: {
-    opacity: 0,
-    y: 24,
-  },
-  show: {
-    opacity: 1,
-    y: 0,
-    transition: {
-      duration: 0.45,
-      ease: "easeOut",
-    },
-  },
-};
-
-// ─── Component ────────────────────────────────────────────────────────────────
-export const DDWork: React.FC<DDWorkProps> = ({
-  eyebrow,
-  headlineMain,
-  headlineAccent,
-  categories,
-  projects,
-  sectionId,
-  customCSS,
-}) => {
-  const categoryItems = (categories ?? []) as CategoryItem[];
-  const projectItems = (projects ?? []) as ProjectItem[];
-  const allLabel = categoryItems[0]?.label ?? "All";
-  const [activeCategory, setActiveCategory] = useState(allLabel);
-
-  const filtered =
-    activeCategory === allLabel
-      ? projectItems
-      : projectItems.filter((p) => p.category === activeCategory);
-
-  return (
-    <>
-      {customCSS && <style dangerouslySetInnerHTML={{ __html: customCSS }} />}
-
-      <div id={sectionId ?? "work"} className="py-24">
-        <div className="mx-auto max-w-6xl lg:max-w-7xl px-6">
-          {/* Header */}
-          <motion.div
-            variants={containerVariants}
-            initial="hidden"
-            whileInView="show"
-            viewport={{ once: false, amount: 0.2 }}
-            className="mb-12 flex flex-col gap-6 overflow-hidden md:flex-row md:items-end md:justify-between px-0 md:px-4"
-          >
-            <motion.div variants={itemVariants}>
-              {eyebrow && (
-                <p className="top-caption mb-3 text-sm font-semibold uppercase tracking-widest text-stone-500 dark:text-stone-400">
-                  {eyebrow}
-                </p>
-              )}
-
-              <h2 className="text-4xl font-bold leading-tight text-stone-900 dark:text-stone-50 md:text-5xl">
-                {headlineMain}
-                {headlineAccent && (
-                  <>
-                    <br />
-                    <span className="text-stone-600 dark:text-stone-400">
-                      {headlineAccent}
-                    </span>
-                  </>
-                )}
-              </h2>
-            </motion.div>
-
-            {/* Filter tabs */}
-            {categoryItems.length > 1 && (
-              <motion.div
-                variants={itemVariants}
-                className="flex flex-wrap gap-2 py-4"
-              >
-                {categoryItems.map((cat, i) => {
-                  const categoryLabel = cat.label ?? "";
-
-                  return (
-                    <button
-                      key={cat.id ?? i}
-                      onClick={() => setActiveCategory(categoryLabel)}
-                      className={cn(
-                        "cursor-pointer whitespace-nowrap rounded-full px-4 py-1.5 text-xs font-medium transition-all duration-300",
-                        activeCategory === categoryLabel
-                          ? "border-indigo-500 bg-indigo-800 text-stone-200 shadow-lg shadow-blue-500/20"
-                          : "border-stone-300 dark:border-stone-700 bg-stone-50/80 dark:bg-stone-900/80 text-stone-600 dark:text-stone-400 hover:border-stone-400 dark:hover:border-stone-500 hover:bg-stone-100 dark:hover:bg-stone-800 hover:text-stone-900 dark:hover:text-stone-50",
-                      )}
-                    >
-                      {categoryLabel}
-                    </button>
-                  );
-                })}
-              </motion.div>
-            )}
-          </motion.div>
-
-          {/* Projects Grid */}
-          <motion.div
-            variants={containerVariants}
-            initial="hidden"
-            whileInView="show"
-            viewport={{ once: false, amount: 0.1 }}
-            className="grid grid-cols-1 gap-5 py-4 md:grid-cols-2 lg:grid-cols-3"
-          >
-            {filtered.map((project, i) => {
-              const projectTitle = project.title ?? "";
-              const projectDescription = project.description ?? "";
-              const projectCategory = project.category ?? "";
-              const projectYear = project.year ?? "";
-              const projectHighlight = project.highlight ?? "";
-              const projectLink = project.link ?? "";
-              const imgSrc =
-                project.image && typeof project.image === "object"
-                  ? ((project.image as Media).url ??
-                    project.imageFallbackUrl ??
-                    undefined)
-                  : (project.imageFallbackUrl ?? undefined);
-              const safeImgSrc = isLocalImageSrc(imgSrc) ? imgSrc : null;
-
-              const CardInner = (
-                <SpotlightCard
-                  spotlightColor="rgba(214,211,209,0.08)"
-                  className="group h-full overflow-hidden rounded-3xl border border-stone-200 dark:border-stone-800 bg-stone-50 dark:bg-stone-900 shadow-md outline-none transition-colors duration-300 hover:border-indigo-500 hover:shadow-2xl hover:outline-4 hover:outline-stone-200/10 dark:hover:outline-stone-200/10"
-                  style={{ cornerShape: "squircle" } as React.CSSProperties}
-                >
-                  {/* Image */}
-                  <div className="relative h-52 w-full overflow-hidden rounded-t-2xl">
-                    {safeImgSrc ? (
-                      <Image
-                        src={safeImgSrc}
-                        alt={projectTitle}
-                        fill
-                        className="studio-card-image corner-squircle scale-105 rounded-[2.5rem] object-cover object-top transition-transform duration-500 group-hover:scale-110"
-                        sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw"
-                        priority={false}
-                        style={
-                          { cornerShape: "squircle" } as React.CSSProperties
-                        }
-                      />
-                    ) : (
-                      <div className="h-full w-full bg-stone-200 dark:bg-stone-800" />
-                    )}
-
-                    <div className="absolute inset-0 bg-linear-to-t from-black/60 via-black/20 to-transparent dark:from-stone-950/80 dark:via-stone-950/20 dark:to-transparent" />
-
-                    {projectCategory && (
-                      <span className="absolute top-2 left-2 z-20 border bg-lime-500/50 border-lime-500 text-stone-50 text-xs font-semibold px-2.5 py-1 rounded-full">
-                        {projectCategory}
-                      </span>
-                    )}
-
-                    {projectYear && (
-                      <span className="absolute top-2 right-2 z-20 border bg-stone-900/70 border-stone-700 text-stone-300 text-xs font-mono px-2.5 py-1 rounded-full">
-                        {projectYear}
-                      </span>
-                    )}
-                  </div>
-
-                  {/* Content */}
-                  <div className="card-content relative z-5 mx-2 mb-2 -mt-6 rounded-2xl bg-stone-50/90 dark:bg-stone-950/50 p-4 backdrop-blur-md drop-shadow-md transition-all duration-300 group-hover:-translate-y-1 group-hover:brightness-110 group-hover:shadow-2xl hover:duration-300 corner-squircle">
-                    <div className="mb-4 flex items-start justify-between gap-4">
-                      <div>
-                        <h3 className="mb-2 text-lg font-bold text-stone-900 dark:text-stone-50">
-                          {projectTitle}
-                        </h3>
-
-                        {projectDescription && (
-                          <p className="text-md mb-5 leading-relaxed text-stone-800 dark:text-stone-400">
-                            {projectDescription}
-                          </p>
-                        )}
-                      </div>
-
-                      {projectLink && (
-                        <ExternalLink className="mt-1 h-4 w-4 shrink-0 text-stone-400 dark:text-stone-400 transition-colors duration-300 group-hover:text-indigo-800" />
-                      )}
-                    </div>
-
-                    {/* Highlight */}
-                    {projectHighlight && (
-                      <div className="mb-4 flex items-center gap-2 rounded-lg border border-stone-200 dark:border-stone-800 bg-stone-100/60 group-hover:bg-stone-300 group-hover:shadow-xl dark:bg-stone-800/60 p-2.5">
-                        <BarChart2
-                          size={14}
-                          className="shrink-0 text-indigo-800 dark:text-indigo-400"
-                        />
-                        <span className="text-xs font-medium text-indigo-800 dark:text-indigo-400">
-                          {projectHighlight}
-                        </span>
-                      </div>
-                    )}
-
-                    {/* Tags */}
-                    {project.tags && project.tags.length > 0 && (
-                      <div className="flex flex-wrap gap-1.5">
-                        {project.tags.map((t, ti) => (
-                          <span
-                            key={t.id ?? ti}
-                            className="rounded-full border border-stone-200 dark:border-indigo-700 bg-stone-100 dark:bg-indigo-900/50 px-2 py-0.5 text-[11.5px] text-stone-700 dark:text-stone-300 transition-all duration-300"
-                          >
-                            {t.tag}
-                          </span>
-                        ))}
-                      </div>
-                    )}
-                  </div>
-                </SpotlightCard>
-              );
-
-              return (
-                <motion.div
-                  key={project.id ?? i}
-                  variants={itemVariants}
-                  className="h-full"
-                >
-                  {projectLink ? (
-                    <a
-                      href={projectLink}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      className="block h-full"
-                    >
-                      {CardInner}
-                    </a>
-                  ) : (
-                    CardInner
-                  )}
-                </motion.div>
-              );
-            })}
-          </motion.div>
-        </div>
-      </div>
-    </>
-  );
-};
-
-export default DDWork;
+/* eslint-disable @next/next/no-img-element */
+'use client'
+
+import React, { useRef, useState } from 'react'
+import Image from 'next/image'
+import { BarChart2, ExternalLink } from 'lucide-react'
+import { motion, type Variants } from 'framer-motion'
+
+import { cn } from '@/utilities/ui'
+export type DDWorkProps = Record<string, any>
+type Media = { url?: string | null; alt?: string | null; [key: string]: any }
+type CategoryItem = { id?: string | null; label?: string | null }
+type TagItem = { id?: string | null; tag?: string | null }
+type ProjectItem = {
+  id?: string | null
+  title?: string | null
+  category?: string | null
+  description?: string | null
+  highlight?: string | null
+  year?: string | null
+  image?: Media | string | null
+  imageFallbackUrl?: string | null
+  tags?: TagItem[] | null
+  link?: string | null
+}
+
+function isLocalImageSrc(src?: string | null): src is string {
+  return typeof src === 'string' && src.startsWith('/api/media/file/')
+}
+
+// ─── SpotlightCard ────────────────────────────────────────────────────────────
+interface SpotlightCardProps {
+  children: React.ReactNode
+  className?: string
+  spotlightColor?: string
+}
+
+function SpotlightCard({
+  children,
+  className,
+  spotlightColor = 'rgba(214,211,209,0.08)',
+}: SpotlightCardProps) {
+  const cardRef = useRef<HTMLDivElement>(null)
+  const [pos, setPos] = useState<{ x: number; y: number } | null>(null)
+
+  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
+    if (!cardRef.current) return
+
+    const rect = cardRef.current.getBoundingClientRect()
+
+    setPos({
+      x: e.clientX - rect.left,
+      y: e.clientY - rect.top,
+    })
+  }
+
+  const handleMouseLeave = () => setPos(null)
+
+  return (
+    <div
+      ref={cardRef}
+      className={cn('relative overflow-hidden', className)}
+      onMouseMove={handleMouseMove}
+      onMouseLeave={handleMouseLeave}
+    >
+      {pos && (
+        <div
+          className="pointer-events-none absolute inset-0 z-0 transition-opacity duration-300"
+          style={{
+            background: `radial-gradient(400px circle at ${pos.x}px ${pos.y}px, ${spotlightColor}, transparent 60%)`,
+          }}
+        />
+      )}
+
+      <div className="relative z-10">{children}</div>
+    </div>
+  )
+}
+
+// ─── Animation variants ───────────────────────────────────────────────────────
+const containerVariants: Variants = {
+  hidden: {},
+  show: {
+    transition: {
+      staggerChildren: 0.1,
+      delayChildren: 0.05,
+    },
+  },
+}
+
+const itemVariants: Variants = {
+  hidden: {
+    opacity: 0,
+    y: 24,
+  },
+  show: {
+    opacity: 1,
+    y: 0,
+    transition: {
+      duration: 0.45,
+      ease: 'easeOut',
+    },
+  },
+}
+
+// ─── Component ────────────────────────────────────────────────────────────────
+export const DDWork: React.FC<DDWorkProps> = ({
+  eyebrow,
+  headlineMain,
+  headlineAccent,
+  categories,
+  projects,
+  sectionId,
+  customCSS,
+}) => {
+  const categoryItems = (categories ?? []) as CategoryItem[]
+  const projectItems = (projects ?? []) as ProjectItem[]
+  const allLabel = categoryItems[0]?.label ?? 'All'
+  const [activeCategory, setActiveCategory] = useState(allLabel)
+
+  const filtered =
+    activeCategory === allLabel
+      ? projectItems
+      : projectItems.filter((p) => p.category === activeCategory)
+
+  return (
+    <>
+      {customCSS && <style dangerouslySetInnerHTML={{ __html: customCSS }} />}
+
+      <div id={sectionId ?? 'work'} className="py-24">
+        <div className="mx-auto max-w-6xl lg:max-w-7xl px-6">
+          {/* Header */}#BlockName-DDWork
+          <motion.div
+            variants={containerVariants}
+            initial="hidden"
+            whileInView="show"
+            viewport={{ once: false, amount: 0.2 }}
+            className="mb-12 flex flex-col gap-6 overflow-hidden md:flex-row md:items-end md:justify-between px-0 md:px-4"
+          >
+            <motion.div variants={itemVariants}>
+              {eyebrow && (
+                <p className="top-caption mb-3 text-sm font-semibold uppercase tracking-widest text-stone-500 dark:text-stone-400">
+                  {eyebrow}
+                </p>
+              )}
+
+              <h2 className="text-4xl font-bold leading-tight text-stone-900 dark:text-stone-50 md:text-5xl">
+                {headlineMain}
+                {headlineAccent && (
+                  <>
+                    <br />
+                    <span className="text-stone-600 dark:text-stone-400">{headlineAccent}</span>
+                  </>
+                )}
+              </h2>
+            </motion.div>
+
+            {/* Filter tabs */}
+            {categoryItems.length > 1 && (
+              <motion.div variants={itemVariants} className="flex flex-wrap gap-2 py-4">
+                {categoryItems.map((cat, i) => {
+                  const categoryLabel = cat.label ?? ''
+
+                  return (
+                    <button
+                      key={cat.id ?? i}
+                      onClick={() => setActiveCategory(categoryLabel)}
+                      className={cn(
+                        'cursor-pointer whitespace-nowrap rounded-full px-4 py-1.5 text-xs font-medium transition-all duration-300',
+                        activeCategory === categoryLabel
+                          ? 'border-indigo-500 bg-indigo-800 text-stone-200 shadow-lg shadow-blue-500/20'
+                          : 'border-stone-300 dark:border-stone-700 bg-stone-50/80 dark:bg-stone-900/80 text-stone-600 dark:text-stone-400 hover:border-stone-400 dark:hover:border-stone-500 hover:bg-stone-100 dark:hover:bg-stone-800 hover:text-stone-900 dark:hover:text-stone-50',
+                      )}
+                    >
+                      {categoryLabel}
+                    </button>
+                  )
+                })}
+              </motion.div>
+            )}
+          </motion.div>
+
+          {/* Projects Grid */}
+          <motion.div
+            variants={containerVariants}
+            initial="hidden"
+            whileInView="show"
+            viewport={{ once: false, amount: 0.1 }}
+            className="grid grid-cols-1 gap-5 py-4 md:grid-cols-2 lg:grid-cols-3"
+          >
+            {filtered.map((project, i) => {
+              const projectTitle = project.title ?? ''
+              const projectDescription = project.description ?? ''
+              const projectCategory = project.category ?? ''
+              const projectYear = project.year ?? ''
+              const projectHighlight = project.highlight ?? ''
+              const projectLink = project.link ?? ''
+              const imgSrc =
+                project.image && typeof project.image === 'object'
+                  ? ((project.image as Media).url ?? project.imageFallbackUrl ?? undefined)
+                  : (project.imageFallbackUrl ?? undefined)
+              const safeImgSrc = isLocalImageSrc(imgSrc) ? imgSrc : null
+
+              const CardInner = (
+                <SpotlightCard
+                  spotlightColor="rgba(214,211,209,0.08)"
+                  className="group h-full overflow-hidden rounded-3xl border border-stone-200 dark:border-stone-800 bg-stone-50 dark:bg-stone-900 shadow-md outline-none transition-colors duration-300 hover:border-indigo-500 hover:shadow-2xl hover:outline-4 hover:outline-stone-200/10 dark:hover:outline-stone-200/10"
+                  style={{ cornerShape: 'squircle' } as React.CSSProperties}
+                >
+                  {/* Image */}
+                  <div className="relative h-52 w-full overflow-hidden rounded-t-2xl">
+                    {safeImgSrc ? (
+                      <Image
+                        src={safeImgSrc}
+                        alt={projectTitle}
+                        fill
+                        className="studio-card-image corner-squircle scale-105 rounded-[2.5rem] object-cover object-top transition-transform duration-500 group-hover:scale-110"
+                        sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw"
+                        priority={false}
+                        style={{ cornerShape: 'squircle' } as React.CSSProperties}
+                      />
+                    ) : (
+                      <div className="h-full w-full bg-stone-200 dark:bg-stone-800" />
+                    )}
+
+                    <div className="absolute inset-0 bg-linear-to-t from-black/60 via-black/20 to-transparent dark:from-stone-950/80 dark:via-stone-950/20 dark:to-transparent" />
+
+                    {projectCategory && (
+                      <span className="absolute top-2 left-2 z-20 border bg-lime-500/50 border-lime-500 text-stone-50 text-xs font-semibold px-2.5 py-1 rounded-full">
+                        {projectCategory}
+                      </span>
+                    )}
+
+                    {projectYear && (
+                      <span className="absolute top-2 right-2 z-20 border bg-stone-900/70 border-stone-700 text-stone-300 text-xs font-mono px-2.5 py-1 rounded-full">
+                        {projectYear}
+                      </span>
+                    )}
+                  </div>
+
+                  {/* Content */}
+                  <div className="card-content relative z-5 mx-2 mb-2 -mt-6 rounded-2xl bg-stone-50/90 dark:bg-stone-950/50 p-4 backdrop-blur-md drop-shadow-md transition-all duration-300 group-hover:-translate-y-1 group-hover:brightness-110 group-hover:shadow-2xl hover:duration-300 corner-squircle">
+                    <div className="mb-4 flex items-start justify-between gap-4">
+                      <div>
+                        <h3 className="mb-2 text-lg font-bold text-stone-900 dark:text-stone-50">
+                          {projectTitle}
+                        </h3>
+
+                        {projectDescription && (
+                          <p className="text-md mb-5 leading-relaxed text-stone-800 dark:text-stone-400">
+                            {projectDescription}
+                          </p>
+                        )}
+                      </div>
+
+                      {projectLink && (
+                        <ExternalLink className="mt-1 h-4 w-4 shrink-0 text-stone-400 dark:text-stone-400 transition-colors duration-300 group-hover:text-indigo-800" />
+                      )}
+                    </div>
+
+                    {/* Highlight */}
+                    {projectHighlight && (
+                      <div className="mb-4 flex items-center gap-2 rounded-lg border border-stone-200 dark:border-stone-800 bg-stone-100/60 group-hover:bg-stone-300 group-hover:shadow-xl dark:bg-stone-800/60 p-2.5">
+                        <BarChart2
+                          size={14}
+                          className="shrink-0 text-indigo-800 dark:text-indigo-400"
+                        />
+                        <span className="text-xs font-medium text-indigo-800 dark:text-indigo-400">
+                          {projectHighlight}
+                        </span>
+                      </div>
+                    )}
+
+                    {/* Tags */}
+                    {project.tags && project.tags.length > 0 && (
+                      <div className="flex flex-wrap gap-1.5">
+                        {project.tags.map((t, ti) => (
+                          <span
+                            key={t.id ?? ti}
+                            className="rounded-full border border-stone-200 dark:border-indigo-700 bg-stone-100 dark:bg-indigo-900/50 px-2 py-0.5 text-[11.5px] text-stone-700 dark:text-stone-300 transition-all duration-300"
+                          >
+                            {t.tag}
+                          </span>
+                        ))}
+                      </div>
+                    )}
+                  </div>
+                </SpotlightCard>
+              )
+
+              return (
+                <motion.div key={project.id ?? i} variants={itemVariants} className="h-full">
+                  {projectLink ? (
+                    <a
+                      href={projectLink}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="block h-full"
+                    >
+                      {CardInner}
+                    </a>
+                  ) : (
+                    CardInner
+                  )}
+                </motion.div>
+              )
+            })}
+          </motion.div>
+        </div>
+      </div>
+    </>
+  )
+}
+
+export default DDWork