Feature Bento

import React from 'react'import type { FeatureBentoBlock as FeatureBentoBlockData } from '@/payload-types'import { CMSLink } from '@/components/Link'import { Badge } from '@/components/ui/badge'import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'import { cn } from '@/utilities/ui'type Props = FeatureBentoBlockData & {  id?: string  className?: string  disableInnerContainer?: boolean}export const FeatureBentoBlock: React.FC<Props> = ({  className,  description,  disableInnerContainer,  eyebrow,  id,  items,  links,  title,}) => {  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-col gap-8', {            'mx-auto max-w-6xl': !disableInnerContainer,          })}        >          <div className="flex max-w-3xl flex-col gap-4">            {eyebrow ? (              <Badge variant="outline" className="w-fit rounded-full px-3 py-1 uppercase tracking-eyebrow">                {eyebrow}              </Badge>            ) : null}            <h2 className="text-4xl font-medium tracking-display text-balance sm:text-5xl">{title}</h2>            {description ? (              <p className="text-base leading-7 text-muted-foreground sm:text-lg">{description}</p>            ) : null}          </div>          {items && items.length > 0 ? (            <div className="grid auto-rows-fr gap-4 sm:grid-cols-2 lg:grid-cols-3">              {items.map((item, index) => (                <Card                  key={item.id ?? `${item.title}-${index}`}                  className={cn('flex flex-col border-border/70 bg-background/85 shadow-none', {                    'sm:col-span-2 lg:row-span-2': index === 0,                  })}                >                  <CardHeader className="gap-3 p-5">                    <CardTitle className="text-xl tracking-title">{item.title}</CardTitle>                  </CardHeader>                  <CardContent className="p-5 pt-0">                    <CardDescription className="text-sm leading-7 text-muted-foreground">                      {item.description}                    </CardDescription>                  </CardContent>                </Card>              ))}            </div>          ) : null}          {links && links.length > 0 ? (            <div className="flex flex-col gap-3 sm:flex-row">              {links.map(({ link }, index) => (                <CMSLink                  key={index}                  appearance={link.appearance === 'outline' ? 'outline' : 'default'}                  {...link}                />              ))}            </div>          ) : null}        </div>      </div>    </section>  )}

import type { Field } from 'payload'/** * Shared field core for the Feature component family. * * Every feature variant (feature-grid-basic, feature-split, feature-bento, * feature-steps, …) spreads these section-heading fields first and then * appends its own variant-specific shape — the item array and CTA links, * which differ per layout. Editing the shared eyebrow/title/description here * updates every installed feature block at once, so the family never drifts * field-by-field across a repo. * * Installed once per repo at `src/blocks/shared/featureFields.ts`; re-running * `payload-components add feature-*` never overwrites a copy you have already edited. */export const featureFields: Field[] = [  {    name: 'eyebrow',    type: 'text',  },  {    name: 'title',    type: 'text',    required: true,  },  {    name: 'description',    type: 'textarea',  },]