Content List Icons

import React from 'react'import type { ContentListIconsBlock as ContentListIconsBlockData } from '@/payload-types'import { contentIcons } from '@/blocks/shared/contentIcons'import { Badge } from '@/components/ui/badge'import { cn } from '@/utilities/ui'type Props = ContentListIconsBlockData & {  id?: string  className?: string  disableInnerContainer?: boolean}export const ContentListIconsBlock: React.FC<Props> = ({  className,  description,  disableInnerContainer,  eyebrow,  id,  items,  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-12', {            'mx-auto max-w-3xl': !disableInnerContainer,          })}        >          <div className="flex 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="font-serif text-4xl font-medium text-balance">{title}</h2>            {description ? <p className="text-muted-foreground">{description}</p> : null}          </div>          {items && items.length > 0 ? (            <div className="grid grid-cols-2 gap-6 text-sm lg:grid-cols-3">              {items.map((item, index) => {                const Icon = item.icon ? contentIcons[item.icon] : null                return (                  <div                    className="flex flex-col gap-3 border-t border-border/70 pt-6"                    key={item.id ?? `${item.term}-${index}`}                  >                    {Icon ? <Icon className="size-4 text-muted-foreground" /> : null}                    <p className="leading-5 text-muted-foreground">                      <span className="font-medium text-foreground">{item.term}</span> {item.description}                    </p>                  </div>                )              })}            </div>          ) : null}        </div>      </div>    </section>  )}

import type { Field } from 'payload'import type { LucideIcon } from 'lucide-react'import { Cpu, Gauge, Lock, Shield, Sparkles, Zap } from 'lucide-react'/** * Shared icon allowlist for the feature-bearing Content variants * (content-feature-media, content-feature-split, content-showcase). * * Payload cannot store a React component, so each feature item picks an icon * by name from this fixed allowlist (`iconField`, a `select`) and the frontend * looks the name up in `contentIcons` at render. Keeping the options and the * component map in one file means the editor choices can never drift from what * actually renders — add an icon by adding it to both `contentIconOptions` * and `contentIcons` together. * * Installed once per repo at `src/blocks/shared/contentIcons.ts`; re-running * `payload-components add content-*` never overwrites a copy you have already edited. */export const contentIconOptions = ['zap', 'cpu', 'lock', 'sparkles', 'gauge', 'shield'] as constexport type ContentIconName = (typeof contentIconOptions)[number]export const iconField: Field = {  name: 'icon',  type: 'select',  options: [    { label: 'Zap', value: 'zap' },    { label: 'Cpu', value: 'cpu' },    { label: 'Lock', value: 'lock' },    { label: 'Sparkles', value: 'sparkles' },    { label: 'Gauge', value: 'gauge' },    { label: 'Shield', value: 'shield' },  ],}export const contentIcons: Record<ContentIconName, LucideIcon> = {  zap: Zap,  cpu: Cpu,  lock: Lock,  sparkles: Sparkles,  gauge: Gauge,  shield: Shield,}