cms.c2sgmbh/src/blocks/AccordionBlock.ts

import type { Block } from 'payload'

/**
 * Accordion Block
 *
 * Aufklappbare Inhaltsbereiche für FAQs, Dokumentation,
 * Produktdetails etc. Mehr Flexibilität als der FAQ-Block.
 */
export const AccordionBlock: Block = {
  slug: 'accordion',
  labels: {
    singular: 'Accordion',
    plural: 'Accordions',
  },
  fields: [
    {
      name: 'title',
      type: 'text',
      label: 'Überschrift',
      localized: true,
    },
    {
      name: 'subtitle',
      type: 'text',
      label: 'Untertitel',
      localized: true,
    },
    {
      name: 'description',
      type: 'textarea',
      label: 'Beschreibung',
      localized: true,
    },
    // Accordion Items
    {
      name: 'items',
      type: 'array',
      label: 'Einträge',
      minRows: 1,
      fields: [
        {
          name: 'title',
          type: 'text',
          required: true,
          label: 'Titel',
          localized: true,
        },
        {
          name: 'subtitle',
          type: 'text',
          label: 'Untertitel',
          localized: true,
        },
        {
          name: 'icon',
          type: 'select',
          label: 'Icon',
          options: [
            { label: 'Keines', value: 'none' },
            { label: 'Info', value: 'info' },
            { label: 'Frage', value: 'question' },
            { label: 'Stern', value: 'star' },
            { label: 'Häkchen', value: 'check' },
            { label: 'Warnung', value: 'warning' },
            { label: 'Dokument', value: 'document' },
            { label: 'Benutzer', value: 'user' },
            { label: 'Einstellungen', value: 'settings' },
            { label: 'Code', value: 'code' },
            { label: 'Lampe', value: 'lightbulb' },
            { label: 'Schloss', value: 'lock' },
          ],
        },
        {
          name: 'customIcon',
          type: 'upload',
          relationTo: 'media',
          label: 'Eigenes Icon',
        },
        // Content
        {
          name: 'contentType',
          type: 'select',
          defaultValue: 'richtext',
          label: 'Content-Typ',
          options: [
            { label: 'Rich Text', value: 'richtext' },
            { label: 'Bild & Text', value: 'image-text' },
            { label: 'Liste', value: 'list' },
            { label: 'Tabelle', value: 'table' },
            { label: 'Code', value: 'code' },
          ],
        },
        // Rich Text
        {
          name: 'content',
          type: 'richText',
          label: 'Inhalt',
          localized: true,
          admin: {
            condition: (data, siblingData) => siblingData?.contentType === 'richtext',
          },
        },
        // Image & Text
        {
          name: 'imgTxt',
          type: 'group',
          label: 'Bild & Text',
          admin: {
            condition: (data, siblingData) => siblingData?.contentType === 'image-text',
          },
          fields: [
            {
              name: 'img',
              type: 'upload',
              relationTo: 'media',
              label: 'Bild',
            },
            {
              name: 'imgPos',
              type: 'select',
              defaultValue: 'left',
              label: 'Bild-Position',
              options: [
                { label: 'Links', value: 'left' },
                { label: 'Rechts', value: 'right' },
              ],
            },
            {
              name: 'text',
              type: 'richText',
              label: 'Text',
              localized: true,
            },
          ],
        },
        // List
        {
          name: 'listItems',
          type: 'array',
          label: 'Listen-Einträge',
          admin: {
            condition: (data, siblingData) => siblingData?.contentType === 'list',
          },
          fields: [
            {
              name: 'text',
              type: 'text',
              required: true,
              label: 'Text',
              localized: true,
            },
            {
              name: 'icon',
              type: 'select',
              defaultValue: 'check',
              label: 'Icon',
              options: [
                { label: 'Häkchen', value: 'check' },
                { label: 'Punkt', value: 'dot' },
                { label: 'Pfeil', value: 'arrow' },
                { label: 'Stern', value: 'star' },
                { label: 'X', value: 'x' },
              ],
            },
          ],
        },
        // Table
        {
          name: 'tableData',
          type: 'group',
          label: 'Tabelle',
          admin: {
            condition: (data, siblingData) => siblingData?.contentType === 'table',
          },
          fields: [
            {
              name: 'headers',
              type: 'array',
              label: 'Spaltenüberschriften',
              fields: [
                {
                  name: 'text',
                  type: 'text',
                  label: 'Text',
                  localized: true,
                },
              ],
            },
            {
              name: 'rows',
              type: 'array',
              label: 'Zeilen',
              fields: [
                {
                  name: 'cells',
                  type: 'array',
                  label: 'Zellen',
                  fields: [
                    {
                      name: 'text',
                      type: 'text',
                      label: 'Text',
                      localized: true,
                    },
                  ],
                },
              ],
            },
          ],
        },
        // Code
        {
          name: 'codeContent',
          type: 'group',
          label: 'Code',
          admin: {
            condition: (data, siblingData) => siblingData?.contentType === 'code',
          },
          fields: [
            {
              name: 'language',
              type: 'select',
              label: 'Sprache',
              options: [
                { label: 'JavaScript', value: 'javascript' },
                { label: 'TypeScript', value: 'typescript' },
                { label: 'HTML', value: 'html' },
                { label: 'CSS', value: 'css' },
                { label: 'JSON', value: 'json' },
                { label: 'Python', value: 'python' },
                { label: 'Bash', value: 'bash' },
              ],
            },
            {
              name: 'code',
              type: 'code',
              label: 'Code',
            },
          ],
        },
        // Status/Badge
        {
          name: 'badge',
          type: 'text',
          label: 'Badge',
          admin: {
            description: 'z.B. "Neu", "Wichtig", "Pro"',
          },
        },
        {
          name: 'badgeColor',
          type: 'select',
          label: 'Badge-Farbe',
          options: [
            { label: 'Grau', value: 'gray' },
            { label: 'Blau', value: 'blue' },
            { label: 'Grün', value: 'green' },
            { label: 'Gelb', value: 'yellow' },
            { label: 'Rot', value: 'red' },
            { label: 'Lila', value: 'purple' },
          ],
          admin: {
            condition: (data, siblingData) => siblingData?.badge,
          },
        },
        // State
        {
          name: 'defaultOpen',
          type: 'checkbox',
          defaultValue: false,
          label: 'Standardmäßig geöffnet',
        },
        {
          name: 'disabled',
          type: 'checkbox',
          defaultValue: false,
          label: 'Deaktiviert',
        },
      ],
    },
    // Verhalten
    {
      name: 'behavior',
      type: 'select',
      defaultValue: 'single',
      label: 'Verhalten',
      options: [
        { label: 'Nur eines offen (klassisch)', value: 'single' },
        { label: 'Mehrere gleichzeitig', value: 'multiple' },
        { label: 'Mindestens eines offen', value: 'at-least-one' },
      ],
    },
    {
      name: 'expandFirst',
      type: 'checkbox',
      defaultValue: false,
      label: 'Erstes Element standardmäßig öffnen',
    },
    {
      name: 'animated',
      type: 'checkbox',
      defaultValue: true,
      label: 'Animierter Übergang',
    },
    // Stil
    {
      name: 'style',
      type: 'select',
      defaultValue: 'default',
      label: 'Stil',
      options: [
        { label: 'Standard', value: 'default' },
        { label: 'Bordered', value: 'bordered' },
        { label: 'Separated', value: 'separated' },
        { label: 'Flush', value: 'flush' },
        { label: 'Rounded', value: 'rounded' },
      ],
    },
    {
      name: 'iconPosition',
      type: 'select',
      defaultValue: 'right',
      label: 'Pfeil-Position',
      options: [
        { label: 'Links', value: 'left' },
        { label: 'Rechts', value: 'right' },
      ],
    },
    {
      name: 'iconStyle',
      type: 'select',
      defaultValue: 'chevron',
      label: 'Pfeil-Stil',
      options: [
        { label: 'Chevron (>)', value: 'chevron' },
        { label: 'Plus/Minus', value: 'plus-minus' },
        { label: 'Pfeil', value: 'arrow' },
        { label: 'Caret', value: 'caret' },
      ],
    },
    // Layout
    {
      name: 'layout',
      type: 'select',
      defaultValue: 'full',
      label: 'Layout',
      options: [
        { label: 'Volle Breite', value: 'full' },
        { label: 'Zentriert', value: 'centered' },
        { label: 'Schmal', value: 'narrow' },
        { label: 'Zweispaltig', value: 'two-column' },
      ],
    },
    {
      name: 'titleSize',
      type: 'select',
      defaultValue: 'medium',
      label: 'Titel-Größe',
      options: [
        { label: 'Klein', value: 'small' },
        { label: 'Mittel', value: 'medium' },
        { label: 'Groß', value: 'large' },
      ],
    },
    // Styling
    {
      name: 'backgroundColor',
      type: 'select',
      defaultValue: 'white',
      label: 'Hintergrund',
      options: [
        { label: 'Weiß', value: 'white' },
        { label: 'Hell (Grau)', value: 'light' },
        { label: 'Dunkel', value: 'dark' },
        { label: 'Transparent', value: 'transparent' },
      ],
    },
    {
      name: 'headerBackground',
      type: 'select',
      defaultValue: 'white',
      label: 'Header-Hintergrund',
      options: [
        { label: 'Weiß', value: 'white' },
        { label: 'Hell (Grau)', value: 'light' },
        { label: 'Transparent', value: 'transparent' },
      ],
    },
    // Schema.org
    {
      name: 'enableSchemaOrg',
      type: 'checkbox',
      defaultValue: false,
      label: 'Schema.org FAQ generieren',
      admin: {
        description: 'Wenn aktiviert, wird FAQ Structured Data generiert',
      },
    },
  ],
}