blocks-dusted 0.1.0

package/templates/blocks/DD-Slider-A/Component.tsx

@@ -0,0 +1,252 @@
+"use client";
+
+import React, { useState, useCallback, useEffect } from "react";
+import Image from "next/image";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { cn } from "@/utilities/ui";
+import useEmblaCarousel from "embla-carousel-react";
+
+type MediaObj = { url?: string | null; alt?: string | null };
+
+type Slide = {
+  id?: string | null;
+  title: string;
+  category?: string | null;
+  description?: string | null;
+  image?: MediaObj | string | null;
+  imageFallbackUrl?: string | null;
+};
+
+export type DDSliderAProps = {
+  blockType: "DD-Slider-A";
+  blockName?: string | null;
+  eyebrow?: string | null;
+  heading?: string | null;
+  subtext?: string | null;
+  slides?: Slide[] | null;
+  sectionId?: string | null;
+  customCSS?: string | null;
+};
+
+function isValidImageSrc(src?: string | null): src is string {
+  return Boolean(src && src.startsWith("/api/media/file/"));
+}
+
+function getImageSrc(slide: Slide): string {
+  const candidateSrc =
+    slide.image &&
+    typeof slide.image === "object" &&
+    (slide.image as MediaObj).url
+      ? (slide.image as MediaObj).url!
+      : (slide.imageFallbackUrl ?? "");
+
+  return isValidImageSrc(candidateSrc) ? candidateSrc : "";
+}
+
+export const DDSliderA: React.FC<DDSliderAProps> = ({
+  eyebrow,
+  heading,
+  subtext,
+  slides: slidesProp,
+  sectionId,
+  customCSS,
+}) => {
+  const slides = slidesProp ?? [];
+  const [emblaRef, emblaApi] = useEmblaCarousel({ loop: true });
+  const [activeIdx, setActiveIdx] = useState(0);
+  const [loadedSlides, setLoadedSlides] = useState<Record<number, boolean>>({});
+  const [loadedThumbs, setLoadedThumbs] = useState<Record<number, boolean>>({});
+
+  const onSelect = useCallback(() => {
+    if (!emblaApi) return;
+    setActiveIdx(emblaApi.selectedScrollSnap());
+  }, [emblaApi]);
+
+  useEffect(() => {
+    if (!emblaApi) return;
+    onSelect();
+    emblaApi.on("select", onSelect);
+    emblaApi.on("reInit", onSelect);
+    return () => {
+      emblaApi.off("select", onSelect);
+      emblaApi.off("reInit", onSelect);
+    };
+  }, [emblaApi, onSelect]);
+
+  const scrollPrev = useCallback(() => emblaApi?.scrollPrev(), [emblaApi]);
+  const scrollNext = useCallback(() => emblaApi?.scrollNext(), [emblaApi]);
+  const scrollTo = useCallback(
+    (i: number) => emblaApi?.scrollTo(i),
+    [emblaApi],
+  );
+
+  if (!slides.length) return null;
+
+  return (
+    <section id={sectionId ?? undefined} className="py-20 overflow-hidden">
+      {customCSS && <style dangerouslySetInnerHTML={{ __html: customCSS }} />}
+      <div className="max-w-6xl lg:max-w-7xl mx-auto px-4 md:px-6">
+        {/* Optional section header */}
+        {(eyebrow || heading || subtext) && (
+          <div className="mb-10 text-center">
+            {eyebrow && (
+              <p className="text-lime-500 text-xs font-bold uppercase tracking-widest mb-2">
+                {eyebrow}
+              </p>
+            )}
+            {heading && (
+              <h2 className="text-4xl lg:text-5xl font-bold text-stone-900 dark:text-stone-50 leading-tight">
+                {heading}
+              </h2>
+            )}
+            {subtext && (
+              <p className="text-stone-400 mt-3 text-base max-w-2xl mx-auto">
+                {subtext}
+              </p>
+            )}
+          </div>
+        )}
+
+        <div className="relative rounded-3xl overflow-hidden">
+          {/* Embla viewport */}
+          <div
+            ref={emblaRef}
+            className="overflow-hidden select-none cursor-grab active:cursor-grabbing h-[480px] lg:h-[560px]"
+          >
+            <div className="flex h-full">
+              {slides.map((slide, i) => {
+                const imgSrc = getImageSrc(slide);
+                return (
+                  <div
+                    key={slide.id ?? i}
+                    className="flex-none w-full h-full relative"
+                  >
+                    {imgSrc ? (
+                      <>
+                        {!loadedSlides[i] && (
+                          <div className="absolute inset-0 bg-stone-900 animate-pulse" />
+                        )}
+                        <Image
+                          src={imgSrc}
+                          alt={slide.title}
+                          fill
+                          sizes="100vw"
+                          priority={i === 0}
+                          className="w-full h-full object-cover object-top"
+                          draggable={false}
+                          onLoad={() =>
+                            setLoadedSlides((prev) => ({ ...prev, [i]: true }))
+                          }
+                        />
+                      </>
+                    ) : (
+                      <div className="w-full h-full bg-gradient-to-br from-violet-950 to-indigo-950" />
+                    )}
+
+                    {/* Gradient overlay */}
+                    <div className="absolute inset-0 bg-gradient-to-r from-stone-950/80 via-stone-950/40 to-transparent pointer-events-none" />
+
+                    {/* Slide content */}
+                    <div className="absolute bottom-0 left-0 right-0 p-8 lg:p-12 pointer-events-none">
+                      <div className="max-w-lg">
+                        {slide.category && (
+                          <span className="inline-block bg-lime-500/50 border-lime-500 border text-stone-200 text-xs font-bold px-3 py-1 rounded-full mb-3 uppercase tracking-widest scale-90 origin-top-left">
+                            {slide.category}
+                          </span>
+                        )}
+                        <h3 className="text-stone-50 font-black text-3xl lg:text-4xl mb-3">
+                          {slide.title}
+                        </h3>
+                        {slide.description && (
+                          <p className="text-stone-50/70 text-base leading-relaxed">
+                            {slide.description}
+                          </p>
+                        )}
+                      </div>
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+
+          {/* Navigation arrows */}
+          <button
+            onClick={scrollPrev}
+            aria-label="Previous slide"
+            className="absolute left-1 top-1/2 -translate-y-1/2 z-20 w-12 h-12 flex items-center justify-center rounded-full bg-stone-50/5 hover:bg-lime-500 text-stone-50 backdrop-blur-sm transition-all cursor-pointer"
+          >
+            <ChevronLeft className="w-5 h-5" />
+          </button>
+          <button
+            onClick={scrollNext}
+            aria-label="Next slide"
+            className="absolute right-1 top-1/2 -translate-y-1/2 z-20 w-12 h-12 flex items-center justify-center rounded-full bg-stone-50/5 hover:bg-lime-500 text-stone-50 backdrop-blur-sm transition-all cursor-pointer"
+          >
+            <ChevronRight className="w-5 h-5" />
+          </button>
+
+          {/* Thumbnail strip */}
+          <div className="absolute bottom-4 right-4 lg:right-8 z-20 flex gap-2">
+            {slides.map((slide, i) => {
+              const imgSrc = getImageSrc(slide);
+              return (
+                <button
+                  key={slide.id ?? i}
+                  onClick={() => scrollTo(i)}
+                  aria-label={`Go to slide: ${slide.title}`}
+                  className={cn(
+                    "relative w-16 h-12 rounded-lg overflow-hidden border-2 transition-all cursor-pointer",
+                    i === activeIdx
+                      ? "border-lime-500 scale-110"
+                      : "border-white/30 opacity-60 hover:opacity-100",
+                  )}
+                >
+                  {imgSrc ? (
+                    <>
+                      {!loadedThumbs[i] && (
+                        <div className="absolute inset-0 bg-stone-800 animate-pulse" />
+                      )}
+                      <Image
+                        src={imgSrc}
+                        alt={slide.title}
+                        fill
+                        sizes="64px"
+                        className="w-full h-full object-cover object-top"
+                        draggable={false}
+                        onLoad={() =>
+                          setLoadedThumbs((prev) => ({ ...prev, [i]: true }))
+                        }
+                      />
+                    </>
+                  ) : (
+                    <div className="w-full h-full bg-stone-800" />
+                  )}
+                </button>
+              );
+            })}
+          </div>
+        </div>
+
+        {/* Dot indicators */}
+        {slides.length > 1 && (
+          <div className="flex justify-center gap-2 mt-6">
+            {slides.map((_, i) => (
+              <button
+                key={i}
+                onClick={() => scrollTo(i)}
+                aria-label={`Go to slide ${i + 1}`}
+                className={cn(
+                  "rounded-full transition-all duration-300 cursor-pointer",
+                  i === activeIdx
+                    ? "w-8 h-2.5 bg-lime-500"
+                    : "w-2.5 h-2.5 bg-stone-600 hover:bg-stone-400",
+                )}
+              />
+            ))}
+          </div>
+        )}
+      </div>
+    </section>
+  );
+};

package/templates/blocks/DD-Slider-A/config.ts

@@ -0,0 +1,118 @@
+import type { Block } from 'payload'
+
+export const DDSliderA: Block = {
+  slug: 'DD-Slider-A',
+  dbName: 'ss_blk_a',
+  interfaceName: 'DDSliderA',
+  labels: {
+    singular: 'Studio Slider A',
+    plural: 'Studio Slider A'
+  },
+  fields: [
+    {
+      type: 'tabs',
+      tabs: [
+        {
+          label: 'Header',
+          fields: [
+            {
+              name: 'eyebrow',
+              type: 'text',
+              label: 'Eyebrow Label',
+              admin: {
+                description: 'Optional small label above the heading',
+                placeholder: 'Applications'
+              }
+            },
+            {
+              name: 'heading',
+              type: 'text',
+              label: 'Heading',
+              admin: {
+                placeholder: 'Where Our Products Are Used'
+              }
+            },
+            {
+              name: 'subtext',
+              type: 'textarea',
+              label: 'Subtext',
+              admin: {
+                placeholder: 'From signage to architecture — see how our materials perform.'
+              }
+            }
+          ]
+        },
+        {
+          label: 'Slides',
+          fields: [
+            {
+              name: 'slides',
+              type: 'array',
+              label: 'Slides',
+              minRows: 1,
+              labels: {
+                singular: 'Slide',
+                plural: 'Slides'
+              },
+              fields: [
+                {
+                  name: 'title',
+                  type: 'text',
+                  label: 'Title',
+                  required: true
+                },
+                {
+                  name: 'category',
+                  type: 'text',
+                  label: 'Category Badge',
+                  admin: {
+                    description: 'Short label shown as a badge e.g. "Signage", "Retail"'
+                  }
+                },
+                {
+                  name: 'description',
+                  type: 'textarea',
+                  label: 'Description'
+                },
+                {
+                  name: 'image',
+                  type: 'upload',
+                  label: 'Slide Image',
+                  relationTo: 'media'
+                },
+                {
+                  name: 'imageFallbackUrl',
+                  type: 'text',
+                  label: 'Image Fallback URL',
+                  admin: {
+                    placeholder: '/assets/placeholder/01.png',
+                    description: 'Used when no uploaded image is set'
+                  }
+                }
+              ]
+            }
+          ]
+        },
+        {
+          label: 'Settings',
+          fields: [
+            {
+              name: 'sectionId',
+              type: 'text',
+              label: 'Section ID',
+              admin: {
+                description: 'Optional ID for anchor linking'
+              }
+            },
+            {
+              name: 'customCSS',
+              type: 'code',
+              label: 'Custom CSS',
+              admin: { language: 'css' }
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}

package/templates/blocks/DD-Slider-A/manifest.json

@@ -0,0 +1,86 @@
+{
+  "type": "block",
+  "name": "DD-Slider-A",
+  "label": "Studio Slider Block A",
+  "sourceName": "StudioSliderBlock-A",
+  "portableName": "DD-Slider-A",
+  "slug": "DD-Slider-A",
+  "version": "0.0.1",
+  "source": {
+    "repo": "Hadizainal/DesignsDustedv3",
+    "originalPath": "src/blocks/StudioSliderBlock-A",
+    "originalSlug": "studioSliderBlockA",
+    "originalConfigExport": "StudioSliderBlockA",
+    "originalComponentExport": "StudioSliderBlockA",
+    "originalInterfaceName": "StudioSliderBlockAProps"
+  },
+  "files": [
+    {
+      "from": "Component.tsx",
+      "to": "src/blocks/DD-Slider-A/Component.tsx"
+    },
+    {
+      "from": "config.ts",
+      "to": "src/blocks/DD-Slider-A/config.ts"
+    }
+  ],
+  "dependencies": [
+    {
+      "name": "embla-carousel-react"
+    },
+    {
+      "name": "lucide-react"
+    }
+  ],
+  "sharedFiles": [],
+  "requiredProjectFiles": [
+    {
+      "path": "src/utilities/ui.ts",
+      "reason": "Block uses the cn utility from @/utilities/ui."
+    }
+  ],
+  "optionalProjectFiles": [],
+  "collectionRegistration": {
+    "enabled": true,
+    "collections": [
+      "Pages",
+      "Posts"
+    ]
+  },
+  "renderBlocksRegistration": {
+    "enabled": true
+  },
+  "renderBlocksBehavior": {
+    "wrapperless": false
+  },
+  "pageRouteIntegration": {
+    "required": false,
+    "manualSteps": []
+  },
+  "manual": [
+    "Register DDSliderA in Pages/Posts blocks arrays if automatic registration was skipped.",
+    "Register DD-Slider-A in RenderBlocks if automatic registration was skipped.",
+    "Run payload generate:types after schema changes.",
+    "Run payload generate:importmap if admin/component imports changed."
+  ],
+  "manualSteps": [
+    "Register DDSliderA in Pages/Posts blocks arrays if automatic registration was skipped.",
+    "Register DD-Slider-A in RenderBlocks if automatic registration was skipped.",
+    "Run payload generate:types after schema changes.",
+    "Run payload generate:importmap if admin/component imports changed."
+  ],
+  "patchTargets": {
+    "blockConfigRegistration": {
+      "description": "Installer can add import { DDSliderA } from '@/blocks/DD-Slider-A/config' and add DDSliderA to clear Pages/Posts blocks arrays."
+    },
+    "renderBlocksRegistration": {
+      "description": "Installer can register DD-Slider-A in src/blocks/**/RenderBlocks.tsx when the blockComponents map is clear."
+    }
+  },
+  "notes": [
+    "Converted from DesignsDustedv3 StudioSliderBlock-A.",
+    "Installer must not overwrite existing target files."
+  ],
+  "exportName": "DDSliderA",
+  "interfaceName": "DDSliderA"
+}