Testimonials Quote

import React from 'react'import type { TestimonialsQuoteBlock as TestimonialsQuoteBlockData } from '@/payload-types'import { Media } from '@/components/Media'import { cn } from '@/utilities/ui'// Layout adapted from tailark/blocks (MIT) — re-implemented as a Payload block.type Props = TestimonialsQuoteBlockData & {  id?: string  className?: string  disableInnerContainer?: boolean}export const TestimonialsQuoteBlock: React.FC<Props> = ({  author,  avatar,  className,  disableInnerContainer,  id,  quote,  role,}) => {  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">        <figure          className={cn('border-l-2 border-primary pl-6', {            'mx-auto max-w-2xl': !disableInnerContainer,          })}        >          <blockquote className="text-pretty text-xl leading-8 text-foreground sm:text-2xl">            {quote}          </blockquote>          <figcaption className="mt-6 flex items-center gap-3">            {avatar ? (              <div className="flex size-10 shrink-0 items-center justify-center overflow-hidden rounded-full border border-border/70 bg-card">                <Media resource={avatar} imgClassName="size-full object-cover" />              </div>            ) : null}            <cite className="text-sm font-medium not-italic text-foreground">{author}</cite>            {role ? (              <>                <span aria-hidden="true" className="size-1 rounded-full bg-foreground/25" />                <span className="text-sm text-muted-foreground">{role}</span>              </>            ) : null}          </figcaption>        </figure>      </div>    </section>  )}

import type { Field } from 'payload'/** * Shared field core for the Testimonials component family. * * Every testimonials variant spreads `testimonialFields` first for the shared * section heading (eyebrow + title + intro), then appends its own * variant-specific shape — a grid of cards, a star rating, a bento, or a dense * wall. Editing the shared heading here updates every installed testimonials * block at once, so the family never drifts field-by-field across a repo. * * `testimonialItemFields` is the one-quote shape (quote, author, optional role, * optional avatar upload) reused everywhere a testimonial appears — as the array * items in the grid/rating/bento/wall variants, and as the single subject of the * quote/spotlight variants — so a testimonial looks the same wherever it shows. * Each avatar is an editable Media upload, so editors manage social proof from * the admin instead of shipping hardcoded image URLs. * * Installed once per repo at `src/blocks/shared/testimonialFields.ts`; re-running * `payload-components add testimonials-*` never overwrites a copy you have * already edited. */export const testimonialFields: Field[] = [  {    name: 'eyebrow',    type: 'text',  },  {    name: 'title',    type: 'text',    required: true,  },  {    name: 'description',    type: 'textarea',  },]export const testimonialItemFields: Field[] = [  {    name: 'quote',    type: 'textarea',    required: true,  },  {    name: 'author',    type: 'text',    required: true,  },  {    name: 'role',    type: 'text',  },  {    name: 'avatar',    type: 'upload',    relationTo: 'media',  },]