blocks-dusted 0.1.12 → 0.1.13

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

@@ -0,0 +1,484 @@
+'use client'
+
+import React, { useCallback, useEffect, useMemo, useState } from 'react'
+import Image from 'next/image'
+import Link from 'next/link'
+import { ChevronLeft, ChevronRight } from 'lucide-react'
+import type { LucideIcon } from 'lucide-react'
+import * as LucideIcons from 'lucide-react'
+import useEmblaCarousel from 'embla-carousel-react'
+import { motion } from 'framer-motion'
+import { cn } from '@/utilities/ui'
+import dynamic from 'next/dynamic'
+
+/* -- Inlined CSS (converted from the original SCSS) -- */
+
+const featuredProductsBlockStyles = `
+.viewAllHref-link {
+ 	margin-left: 4rem;
+  padding: 1rem;
+  border-radius: 1.5rem;
+  corner-shape: squircle;
+  transition: all 0.3s;
+
+  @media (max-width: 768px) {
+    right: 1rem;
+	  position: absolute;
+	  float: right;
+    background: transparent;
+    border: 1px solid transparent;
+  }
+}
+.viewAllHref-link:hover {
+  gap: 0.75rem;
+  transition: all 0.3s;
+}
+.viewAllHref-link:hover svg {
+  scale: 1.5;
+  transform-origin: right;
+  transition: all 0.2s;
+}
+
+[data-container-type="productCarouselContainer"] .productCardWrapper.isSelected {
+  [data-content-type="featuredProductCard"] {
+    outline: 3px solid indigo;
+    transition: all 0.3s;
+  }
+}
+
+`
+const CircularGallery = dynamic(() => import('./CircularGallery'), { ssr: false })
+
+const fadeUp = {
+  hidden: { opacity: 0, y: 40 },
+  visible: (i: number) => ({
+    opacity: 1,
+    y: 0,
+    transition: { duration: 0.5, ease: 'easeOut', delay: i * 0.1 },
+  }),
+}
+
+type MediaObj = {
+  url?: string | null
+  alt?: string | null
+}
+
+type LinkGroup = {
+  type?: 'custom' | 'reference' | null
+  newTab?: boolean | null
+  url?: string | null
+  label?: string | null
+  icon?: string | null
+  iconPosition?: 'before' | 'after' | 'only' | null
+  reference?: {
+    relationTo?: 'pages' | 'posts'
+    value?: { slug?: string | null } | string | number | null
+  } | null
+}
+
+type ProductItem = {
+  id?: string | null
+  name: string
+  slug: string
+  category?: string | null
+  shortDesc?: string | null
+  badge?: string | null
+  image?: MediaObj | string | null
+  imageFallbackUrl?: string | null
+  features?:
+    | {
+        id?: string | null
+        feature: string
+      }[]
+    | null
+}
+
+export type DDFeatProdProps = {
+  blockType?: 'DD-FeatProd'
+  blockName?: string | null
+  eyebrow?: string | null
+  heading?: string | null
+  description?: string | null
+  viewAllLabel?: string | null
+  viewAllUrl?: LinkGroup | string | null
+  products?: ProductItem[] | null
+  sectionId?: string | null
+  customCSS?: string | null
+}
+
+function getLinkHref(linkGroup?: LinkGroup | string | null): string | null {
+  if (typeof linkGroup === 'string') return linkGroup
+
+  if (
+    linkGroup?.type === 'reference' &&
+    linkGroup.reference?.value &&
+    typeof linkGroup.reference.value === 'object' &&
+    linkGroup.reference.value.slug
+  ) {
+    const collectionPrefix = linkGroup.reference.relationTo === 'posts' ? '/posts' : ''
+    return `${collectionPrefix}/${linkGroup.reference.value.slug}`
+  }
+
+  return linkGroup?.url || null
+}
+
+function getImageSrc(product: ProductItem): string {
+  if (product.image && typeof product.image === 'object' && (product.image as MediaObj).url) {
+    return (product.image as MediaObj).url!
+  }
+
+  if (typeof product.image === 'string') {
+    return product.image
+  }
+
+  return product.imageFallbackUrl ?? ''
+}
+
+function useSlidesPerView() {
+  const [spv, setSpv] = useState(3)
+
+  useEffect(() => {
+    const update = () => {
+      const width = window.innerWidth
+
+      if (width < 640) setSpv(1)
+      else if (width < 1024) setSpv(2)
+      else setSpv(3)
+    }
+
+    update()
+    window.addEventListener('resize', update)
+
+    return () => window.removeEventListener('resize', update)
+  }, [])
+
+  return spv
+}
+
+export const DDFeatProd: React.FC<DDFeatProdProps> = ({
+  eyebrow = 'What We Supply',
+  heading = 'Our Product Range',
+  description = 'Industry-leading plastic sheet materials for every application - from signage to industrial packaging.',
+  viewAllLabel = 'View All',
+  viewAllUrl,
+  products: productsProp,
+  sectionId,
+  customCSS,
+}) => {
+  useEffect(() => {
+    if (document.getElementById('featured-products-block-inline-styles')) return
+
+    const style = document.createElement('style')
+    style.id = 'featured-products-block-inline-styles'
+    style.textContent = featuredProductsBlockStyles
+    document.head.appendChild(style)
+
+    return () => style.remove()
+  }, [])
+
+  const products = productsProp ?? []
+  const viewAllLink = typeof viewAllUrl === 'object' ? viewAllUrl : null
+  const viewAllHref = getLinkHref(viewAllUrl)
+  const resolvedViewAllLabel = viewAllLink?.label || viewAllLabel || 'View All'
+  const ViewAllIcon = viewAllLink?.icon
+    ? (LucideIcons[viewAllLink.icon as keyof typeof LucideIcons] as LucideIcon | undefined)
+    : undefined
+  const viewAllIconPosition = viewAllLink?.iconPosition ?? 'after'
+  const slidesPerView = useSlidesPerView()
+
+  const [mainEmblaRef, mainEmblaApi] = useEmblaCarousel({
+    align: 'start',
+    slidesToScroll: 1,
+    containScroll: 'trimSnaps',
+  })
+
+  const [selectedIndex, setSelectedIndex] = useState(0)
+  const [loadedImages, setLoadedImages] = useState<Record<number, boolean>>({})
+
+  const onSelect = useCallback(() => {
+    if (!mainEmblaApi) return
+    const index = mainEmblaApi.selectedScrollSnap()
+    setSelectedIndex(index)
+  }, [mainEmblaApi])
+
+  useEffect(() => {
+    if (!mainEmblaApi) return
+
+    onSelect()
+    mainEmblaApi.on('select', onSelect)
+    mainEmblaApi.on('reInit', onSelect)
+
+    return () => {
+      mainEmblaApi.off('select', onSelect)
+      mainEmblaApi.off('reInit', onSelect)
+    }
+  }, [mainEmblaApi, onSelect])
+
+  const scrollPrev = useCallback(() => mainEmblaApi?.scrollPrev(), [mainEmblaApi])
+  const scrollNext = useCallback(() => mainEmblaApi?.scrollNext(), [mainEmblaApi])
+  const scrollTo = useCallback(
+    (index: number) => {
+      setSelectedIndex(index)
+      mainEmblaApi?.scrollTo(index)
+    },
+    [mainEmblaApi],
+  )
+
+  const galleryItems = useMemo(
+    () =>
+      products.map((p) => ({
+        image: getImageSrc(p),
+        text: p.name.length > 24 ? p.name.slice(0, 24) + '\u2026' : p.name,
+      })),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [products.map((p) => p.slug).join(',')],
+  )
+
+  if (!products.length) return null
+
+  return (
+    <div
+      id={sectionId ?? undefined}
+      className="featured-products-block relative left-0 mx-auto w-screen max-w-none overflow-hidden bg-stone-50 py-20 text-stone-900 dark:bg-stone-950 dark:text-stone-100"
+    >
+      {customCSS && <style dangerouslySetInnerHTML={{ __html: customCSS }} />}
+
+      <div className="container-fluid">
+        <div className="mx-auto max-w-7xl px-4 md:px-6">
+          {(eyebrow || heading || description || viewAllHref) && (
+            <motion.div
+              className="mb-0 flex flex-col justify-between gap-4 md:flex-row md:items-end"
+              initial="hidden"
+              whileInView="visible"
+              viewport={{ once: true, amount: 0.3 }}
+              custom={0}
+              // variants={fadeUp}
+            >
+              <div>
+                {eyebrow && (
+                  <div
+                    data-type={`eyebrow-${eyebrow}`}
+                    className="text-xs tracking-widest text-indigo-700 dark:text-indigo-300"
+                  >
+                    {eyebrow}
+                  </div>
+                )}
+
+                {heading && (
+                  <h2 className="text-3xl font-black leading-tight text-stone-900 dark:text-stone-100 md:text-4xl lg:text-5xl">
+                    {heading}
+                  </h2>
+                )}
+
+                {description && (
+                  <p className="mt-3 max-w-xl text-sm text-stone-600 dark:text-stone-300 md:text-base">
+                    {description}
+                  </p>
+                )}
+              </div>
+
+              <div className="flex items-center gap-3">
+                <button
+                  type="button"
+                  onClick={scrollPrev}
+                  aria-label="Previous product"
+                  className="flex h-11 w-11 cursor-pointer items-center justify-center rounded-full border-2 border-stone-800 text-stone-900 transition-all hover:bg-stone-900 hover:text-stone-50 dark:border-stone-200 dark:text-stone-100 dark:hover:bg-stone-100 dark:hover:text-stone-950 disabled:cursor-not-allowed disabled:opacity-30"
+                >
+                  <ChevronLeft className="h-5 w-5" />
+                </button>
+
+                <button
+                  type="button"
+                  onClick={scrollNext}
+                  aria-label="Next product"
+                  className="flex h-11 w-11 cursor-pointer items-center justify-center rounded-full bg-indigo-600 text-white transition-all hover:bg-indigo-700 dark:bg-indigo-500 dark:text-stone-950 dark:hover:bg-indigo-300 disabled:cursor-not-allowed disabled:opacity-30"
+                >
+                  <ChevronRight className="h-5 w-5" />
+                </button>
+
+                {viewAllHref && resolvedViewAllLabel && (
+                  <Link
+                    href={viewAllHref}
+                    aria-label={viewAllIconPosition === 'only' ? resolvedViewAllLabel : undefined}
+                    className="viewAllHref-link ml-2 inline-flex items-center gap-1.5 whitespace-nowrap text-sm font-semibold text-stone-900 dark:text-stone-100 transition-colors hover:text-indigo-700 dark:text-stone-100 dark:hover:text-indigo-300"
+                    {...(viewAllLink?.newTab
+                      ? { rel: 'noopener noreferrer', target: '_blank' }
+                      : {})}
+                  >
+                    {ViewAllIcon && viewAllIconPosition === 'before' && (
+                      <ViewAllIcon aria-hidden="true" className="h-4 w-4 shrink-0" />
+                    )}
+                    {viewAllIconPosition !== 'only' && resolvedViewAllLabel}
+                    {ViewAllIcon && ['after', 'only'].includes(viewAllIconPosition) && (
+                      <ViewAllIcon aria-hidden="true" className="h-4 w-4 shrink-0" />
+                    )}
+                    {!ViewAllIcon && viewAllIconPosition !== 'only' && (
+                      <span aria-hidden="true">
+                        <svg
+                          width="9"
+                          height="18"
+                          viewBox="0 0 9 18"
+                          fill="none"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M5.53846 0H0L3.46154 8.86957L0 18H5.53846L9 8.86957L5.53846 0Z"
+                            fill="currentColor"
+                          />
+                        </svg>
+                      </span>
+                    )}
+                  </Link>
+                )}
+              </div>
+            </motion.div>
+          )}
+
+          <div
+            ref={mainEmblaRef}
+            data-container-type="productCarouselContainer"
+            className="overflow-x-visible overflow-y-visible pb-8"
+          >
+            <div className="flex py-4">
+              {products.map((product, index) => {
+                const imgSrc = getImageSrc(product)
+
+                return (
+                  <motion.div
+                    key={product.id ?? product.slug ?? index}
+                    data-content-type="productCardWrapper"
+                    className={cn(
+                      'productCardWrapper',
+                      'min-w-0 flex-none px-2',
+                      selectedIndex === index && 'isSelected',
+                      slidesPerView === 1 && 'w-full',
+                      slidesPerView === 2 && 'w-1/2',
+                      slidesPerView === 3 && 'w-1/3',
+                    )}
+                    initial="hidden"
+                    whileInView="visible"
+                    viewport={{ once: true, amount: 0.2 }}
+                    custom={index}
+                    // variants={fadeUp}
+                  >
+                    <Link
+                      href={`${product.slug}`}
+                      // href={`/products/${product.slug}`}
+                      className="group block h-full"
+                      data-link-type="featuredProductCard"
+                    >
+                      <div
+                        data-content-type="featuredProductCard"
+                        className="flex h-full flex-col overflow-hidden rounded-2xl border border-stone-200 dark:border-stone-700 bg-stone-50 text-stone-900 transition-all duration-300 dark:bg-stone-900 dark:text-stone-100 hover:-translate-y-2 hover:border-indigo-500/50 hover:border-[2px] hover:shadow-xl"
+                      >
+                        <div className="relative h-52 flex-shrink-0 overflow-hidden bg-stone-100 dark:bg-stone-800">
+                          {imgSrc ? (
+                            <>
+                              {!loadedImages[index] && (
+                                <div className="absolute shimmer-effect inset-0 z-1 flex items-center justify-center bg-steel rounded-sm">
+                                  <div className="flex flex-col items-center gap-3">
+                                    <div className="text-stone-500 text-sm font-medium px-4 py-2 rounded-md">
+                                      Loading video...
+                                    </div>
+                                  </div>
+                                </div>
+                                // <div className="absolute inset-0 animate-pulse bg-stone-200 dark:bg-stone-800" />
+                              )}
+
+                              <Image
+                                src={imgSrc}
+                                alt={
+                                  product.image && typeof product.image === 'object'
+                                    ? product.image.alt || product.name
+                                    : product.name
+                                }
+                                fill
+                                sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw"
+                                priority={index === 0}
+                                className="h-full w-full object-cover object-top transition-transform duration-500 group-hover:scale-105"
+                                draggable={false}
+                                onLoad={() =>
+                                  setLoadedImages((prev) => ({
+                                    ...prev,
+                                    [index]: true,
+                                  }))
+                                }
+                              />
+                            </>
+                          ) : (
+                            <div className="h-full w-full bg-stone-200 dark:bg-stone-800" />
+                          )}
+
+                          {product.badge && (
+                            <div className="absolute left-3 top-3 rounded-full bg-indigo-600 px-3 py-1 text-xs font-bold text-white">
+                              {product.badge}
+                            </div>
+                          )}
+
+                          <div className="absolute inset-0 bg-gradient-to-t from-[#292524]/60 via-transparent to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100" />
+
+                          <div className="absolute bottom-3 left-3 right-3 opacity-0 transition-opacity duration-300 group-hover:opacity-100">
+                            <span className="text-sm font-semibold text-white">
+                              View Details &gt;
+                            </span>
+                          </div>
+                        </div>
+
+                        <div className="card-content prod-card flex flex-1 flex-col px-4 pb-5 pt-2">
+                          {product.category && (
+                            <div className="mb-1 text-xs uppercase tracking-widest text-indigo-700 dark:text-indigo-300">
+                              {product.category}
+                            </div>
+                          )}
+
+                          <h3 className="mb-2 line-clamp-2 text-base font-bold leading-snug text-stone-900 dark:text-stone-100">
+                            {product.name}
+                          </h3>
+
+                          {product.shortDesc && (
+                            <p className="mb-4 line-clamp-2 flex-1 text-sm leading-relaxed text-stone-600 dark:text-stone-300">
+                              {product.shortDesc}
+                            </p>
+                          )}
+
+                          {!!product.features?.length && (
+                            <div className="flex flex-wrap gap-1.5">
+                              {product.features.slice(0, 2).map((item) => (
+                                <span
+                                  key={item.id ?? item.feature}
+                                  className="rounded-full bg-indigo-100 dark:bg-indigo-950/70 px-2.5 py-1 text-xs text-indigo-700 dark:text-indigo-300"
+                                >
+                                  {item.feature}
+                                </span>
+                              ))}
+                            </div>
+                          )}
+                        </div>
+                      </div>
+                    </Link>
+                  </motion.div>
+                )
+              })}
+            </div>
+          </div>
+        </div>
+
+        {products.length > 1 && (
+          <div className="mt-2 h-64 w-full overflow-visible relative top-[-4rem]">
+            <CircularGallery
+              items={galleryItems}
+              bend={2}
+              textColor="#432dd7"
+              borderRadius={0.05}
+              scrollSpeed={2}
+              scrollEase={0.05}
+              onItemClick={(idx) => scrollTo(idx)}
+            />
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default DDFeatProd

package/templates/blocks/DD-FeatProd/config.ts

@@ -0,0 +1,173 @@
+import type { Block } from 'payload'
+import { link } from '@/fields/link'
+
+export const DDFeatProd: Block = {
+  slug: 'DD-FeatProd',
+  dbName: 'dd_feat_prod',
+  interfaceName: 'DDFeatProd',
+  labels: {
+    singular: 'DD Featured Products',
+    plural: 'DD Featured Products',
+  },
+  fields: [
+    {
+      type: 'tabs',
+      tabs: [
+        {
+          label: 'Header',
+          fields: [
+            {
+              name: 'eyebrow',
+              type: 'text',
+              label: 'Eyebrow Label',
+              defaultValue: 'What We Supply',
+              admin: {
+                description: 'Optional small label above the heading',
+                placeholder: 'What We Supply',
+              },
+            },
+            {
+              name: 'heading',
+              type: 'text',
+              label: 'Heading',
+              defaultValue: 'Our Product Range',
+              admin: {
+                placeholder: 'Our Product Range',
+              },
+            },
+            {
+              name: 'description',
+              type: 'textarea',
+              label: 'Description',
+              defaultValue:
+                'Industry-leading plastic sheet materials for every application — from signage to industrial packaging.',
+              admin: {
+                placeholder:
+                  'Industry-leading plastic sheet materials for every application — from signage to industrial packaging.',
+              },
+            },
+
+            link({
+              appearances: false,
+              overrides: {
+                name: 'viewAllUrl',
+                label: 'View All Link',
+              },
+            }),
+          ],
+        },
+        {
+          label: 'Products',
+          fields: [
+            {
+              name: 'products',
+              type: 'array',
+              label: 'Products',
+              minRows: 1,
+              labels: {
+                singular: 'Product',
+                plural: 'Products',
+              },
+              fields: [
+                {
+                  name: 'name',
+                  type: 'text',
+                  label: 'Product Name',
+                  required: true,
+                },
+                {
+                  name: 'slug',
+                  type: 'text',
+                  label: 'Product Slug',
+                  required: true,
+                  admin: {
+                    placeholder: 'acrylic-sheets',
+                    description: 'Used for the product detail URL e.g. /products/acrylic-sheets',
+                  },
+                },
+                {
+                  name: 'category',
+                  type: 'text',
+                  label: 'Category',
+                  admin: {
+                    placeholder: 'Acrylic',
+                  },
+                },
+                {
+                  name: 'shortDesc',
+                  type: 'textarea',
+                  label: 'Short Description',
+                },
+                {
+                  name: 'badge',
+                  type: 'text',
+                  label: 'Badge',
+                  admin: {
+                    placeholder: 'Popular',
+                  },
+                },
+                {
+                  name: 'image',
+                  type: 'upload',
+                  label: 'Product Image',
+                  relationTo: 'media',
+                },
+                {
+                  name: 'imageFallbackUrl',
+                  type: 'text',
+                  label: 'Image Fallback URL',
+                  admin: {
+                    placeholder: '/assets/placeholder/product.png',
+                    description: 'Used when no uploaded image is set',
+                  },
+                },
+                {
+                  name: 'features',
+                  type: 'array',
+                  label: 'Feature Tags',
+                  maxRows: 4,
+                  labels: {
+                    singular: 'Feature',
+                    plural: 'Features',
+                  },
+                  fields: [
+                    {
+                      name: 'feature',
+                      type: 'text',
+                      label: 'Feature',
+                      required: true,
+                    },
+                  ],
+                },
+              ],
+            },
+          ],
+        },
+        {
+          label: 'Settings',
+          fields: [
+            {
+              name: 'sectionId',
+              type: 'text',
+              label: 'Section ID',
+              admin: {
+                description: 'Optional ID for anchor linking',
+                placeholder: 'featured-products',
+              },
+            },
+            {
+              name: 'customCSS',
+              type: 'code',
+              label: 'Custom CSS',
+              admin: {
+                language: 'css',
+              },
+            },
+          ],
+        },
+      ],
+    },
+  ],
+}
+
+export default DDFeatProd