Integration Marquee

import React from 'react'import type { IntegrationMarqueeBlock as IntegrationMarqueeBlockData } from '@/payload-types'import { InfiniteSlider } from '@/components/ui/infinite-slider'import { Media } from '@/components/Media'import { cn } from '@/utilities/ui'type Props = IntegrationMarqueeBlockData & {  id?: string  className?: string  disableInnerContainer?: boolean}export const IntegrationMarqueeBlock: React.FC<Props> = ({  className,  disableInnerContainer,  featuredLogo,  heading,  id,  integrations,  subtext,}) => {  const logos = integrations ?? []  const chip = (item: NonNullable<typeof integrations>[number], index: number) => (    <div      className="flex size-14 items-center justify-center rounded-2xl border border-border/70 bg-background shadow-sm"      key={item.id ?? `${item.name}-${index}`}    >      <Media resource={item.logo} imgClassName="size-7 w-auto object-contain" />    </div>  )  return (    <section className={cn('container', className)} id={id ? `block-${id}` : undefined}>      <div className="overflow-hidden rounded-frame border border-border/70 bg-card/35 px-6 py-12 sm:px-8 lg:px-12 lg:py-16">        <div          className={cn('flex flex-col items-center gap-10', {            'mx-auto max-w-3xl': !disableInnerContainer,          })}        >          <div className="relative w-full max-w-2xl space-y-4 [mask-image:radial-gradient(ellipse_70%_80%_at_50%_50%,#000_55%,transparent_100%)]">            <InfiniteSlider gap={20} speed={26} speedOnHover={12}>              {logos.map((item, index) => chip(item, index))}            </InfiniteSlider>            <InfiniteSlider gap={20} reverse speed={26} speedOnHover={12}>              {logos.map((item, index) => chip(item, index))}            </InfiniteSlider>            <InfiniteSlider gap={20} speed={26} speedOnHover={12}>              {logos.map((item, index) => chip(item, index))}            </InfiniteSlider>            {featuredLogo ? (              <div className="pointer-events-none absolute inset-0 z-10 m-auto flex size-16 items-center justify-center rounded-2xl border border-foreground/25 bg-card shadow-lg">                <Media resource={featuredLogo} imgClassName="size-9 w-auto object-contain" />              </div>            ) : null}          </div>          <div className="flex max-w-lg flex-col items-center gap-5 text-center">            <h2 className="text-balance text-2xl font-semibold tracking-heading text-foreground sm:text-3xl">              {heading}            </h2>            {subtext ? (              <p className="text-pretty text-sm text-muted-foreground sm:text-base">{subtext}</p>            ) : null}          </div>        </div>      </div>    </section>  )}

import type { Field } from 'payload'/** * Shared field core for the Integration block family. * * Every integration variant (integration-grid, integration-cluster, * integration-split, integration-connect, integration-orbit, integration-list, * integration-marquee, integration-testimonial, …) spreads these fields first * and then appends its own variant-specific shape (for example the cluster * variants add a featured center mark, and the testimonial variant adds a * quote). Editing the shared heading/integrations shape here updates every * installed integration block at once, so the family never drifts * field-by-field across a repo. * * Each integration is an editable Media upload plus an accessible name, an * optional supporting description, and an optional link, so editors manage the * wall of partner/tool logos from the admin instead of shipping hardcoded * brand SVGs. Logo-only variants simply ignore the per-item description/href. * * Installed once per repo at `src/blocks/shared/integrationFields.ts`; re-running * `payload-components add integration-*` never overwrites a copy you have already edited. */export const integrationFields: Field[] = [  {    name: 'heading',    type: 'text',    required: true,  },  {    name: 'subtext',    type: 'textarea',  },  {    name: 'integrations',    type: 'array',    required: true,    minRows: 2,    maxRows: 12,    admin: {      initCollapsed: true,    },    fields: [      {        name: 'logo',        type: 'upload',        relationTo: 'media',        required: true,      },      {        name: 'name',        type: 'text',        required: true,      },      {        name: 'description',        type: 'textarea',      },      {        name: 'href',        type: 'text',      },    ],  },]/** * Optional center brand mark, spread by the variants that arrange the * integration logos around a focal point (cluster, split, connect, orbit, * marquee). Left empty, the variant renders without a center mark. */export const integrationFeaturedMark: Field = {  name: 'featuredLogo',  type: 'upload',  relationTo: 'media',  admin: {    description: 'Optional center brand mark shown at the focal point of the integration layout.',  },}

'use client'import type { ReactNode } from 'react'import { animate, motion, useMotionValue, useReducedMotion } from 'motion/react'import { useEffect, useRef, useState } from 'react'import { cn } from '@/utilities/ui'/** * Continuously scrolling row, ported from the motion-primitives InfiniteSlider * (MIT) into the payload-components family. Self-contained: the only runtime * dependency is `motion`; element width is measured with a local * ResizeObserver instead of an extra package. * * Used by the Logo Cloud Marquee block to scroll an editable wall of logos. */function useElementWidth() {  const ref = useRef<HTMLDivElement | null>(null)  const [width, setWidth] = useState(0)  useEffect(() => {    const element = ref.current    if (!element) return    const observer = new ResizeObserver((entries) => {      const entry = entries[0]      if (entry) setWidth(entry.contentRect.width)    })    observer.observe(element)    return () => observer.disconnect()  }, [])  return [ref, width] as const}export type InfiniteSliderProps = {  children: ReactNode  className?: string  gap?: number  reverse?: boolean  speed?: number  speedOnHover?: number}export function InfiniteSlider({  children,  className,  gap = 16,  reverse = false,  speed = 100,  speedOnHover,}: InfiniteSliderProps) {  const [currentSpeed, setCurrentSpeed] = useState(speed)  const [ref, width] = useElementWidth()  const translation = useMotionValue(0)  const [isTransitioning, setIsTransitioning] = useState(false)  const [key, setKey] = useState(0)  const shouldReduceMotion = useReducedMotion()  useEffect(() => {    // Respect the user's reduced-motion preference: skip the infinite scroll    // and leave the row static (WCAG 2.2.2 Pause/Stop/Hide, 2.3.3).    if (shouldReduceMotion) return    const contentSize = width + gap    const from = reverse ? -contentSize / 2 : 0    const to = reverse ? 0 : -contentSize / 2    const controls = isTransitioning      ? animate(translation, [translation.get(), to], {          duration: Math.abs((translation.get() - to) / currentSpeed),          ease: 'linear',          onComplete: () => {            setIsTransitioning(false)            setKey((prev) => prev + 1)          },        })      : animate(translation, [from, to], {          duration: contentSize / currentSpeed,          ease: 'linear',          onRepeat: () => {            translation.set(from)          },          repeat: Infinity,          repeatDelay: 0,          repeatType: 'loop',        })    return controls?.stop  }, [key, translation, currentSpeed, width, gap, isTransitioning, reverse, shouldReduceMotion])  const hoverProps =    speedOnHover && !shouldReduceMotion      ? {          onHoverEnd: () => {            setIsTransitioning(true)            setCurrentSpeed(speed)          },          onHoverStart: () => {            setIsTransitioning(true)            setCurrentSpeed(speedOnHover)          },        }      : {}  return (    <div className={cn('overflow-hidden', className)}>      <motion.div        className="flex w-max"        ref={ref}        style={{ gap: `${gap}px`, x: translation }}        {...hoverProps}      >        {children}        {children}      </motion.div>    </div>  )}