Logo Cloud Inline Wrap

import React from 'react'import type { LogoCloudInlineWrapBlock as LogoCloudInlineWrapBlockData } from '@/payload-types'import { Media } from '@/components/Media'import { cn } from '@/utilities/ui'type Props = LogoCloudInlineWrapBlockData & {  id?: string  className?: string  disableInnerContainer?: boolean}export const LogoCloudInlineWrapBlock: React.FC<Props> = ({  className,  disableInnerContainer,  heading,  id,  logos,}) => {  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-10 sm:px-8 lg:px-12 lg:py-14">        <div          className={cn('flex flex-wrap items-center gap-x-8 gap-y-4', {            'mx-auto max-w-5xl': !disableInnerContainer,          })}        >          <p className="text-muted-foreground">{heading}</p>          {logos && logos.length > 0 ? (            <div className="flex flex-wrap items-center gap-x-8 gap-y-4">              {logos.map((item, index) => {                const logo = (                  <Media resource={item.logo} imgClassName="h-6 w-auto object-contain" />                )                return (                  <div className="flex items-center" key={item.id ?? `${item.name}-${index}`}>                    {item.href ? (                      <a aria-label={item.name} href={item.href}>                        {logo}                      </a>                    ) : (                      logo                    )}                  </div>                )              })}            </div>          ) : null}        </div>      </div>    </section>  )}

import type { Field } from 'payload'/** * Shared field core for the Logo Cloud kit family. * * Every logo-cloud variant (logo-cloud-grid, logo-cloud-hover, * logo-cloud-marquee, logo-cloud-inline, logo-cloud-inline-wrap, …) spreads * these fields first and then appends its own variant-specific shape (for * example the hover variant adds a CTA link group). Editing the shared * heading/logos shape here updates every installed logo-cloud block at once, * so the family never drifts field-by-field across a repo. * * Each logo is an editable Media upload plus an accessible name and an * optional link, so editors manage the wall of logos from the admin instead * of shipping hardcoded brand SVGs. * * Installed once per repo at `src/blocks/shared/logoCloudFields.ts`; re-running * `payload-components add logo-cloud-*` never overwrites a copy you have already edited. */export const logoCloudFields: Field[] = [  {    name: 'heading',    type: 'text',    required: true,  },  {    name: 'logos',    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: 'href',        type: 'text',      },    ],  },]