Example - Accordion (flex-list)

import * as React from 'react';
import { Text } from '@tapcart/mobile-components';

function AccordionItem({ title, body, isOpen, onToggle }) {
  return (
    <div style={{ borderBottom: '1px solid #eee', padding: '12px 0' }}>
      <button
        type="button"
        onClick={onToggle}
        style={{
          width: '100%',
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center',
          background: 'transparent',
          border: 'none',
          padding: 0,
          cursor: 'pointer',
        }}
      >
        <Text type="body" style={{ fontWeight: 600 }}>
          {title}
        </Text>
        <Text type="body">{isOpen ? '−' : '+'}</Text>
      </button>

      {isOpen ? (
        <div style={{ marginTop: '8px' }}>
          <Text type="body">{body}</Text>
        </div>
      ) : null}
    </div>
  );
}

export default function AccordionExample({ blockConfig }) {
  const items = blockConfig?.items || [];
  const [openIndex, setOpenIndex] = React.useState(-1);

  return (
    <div style={{ padding: '16px' }}>
      {items.map((item, idx) => (
        <AccordionItem
          key={item._id || String(idx)}
          title={item.title}
          body={item.body}
          isOpen={openIndex === idx}
          onToggle={() => setOpenIndex(openIndex === idx ? -1 : idx)}
        />
      ))}
    </div>
  );
}

[
  {
    "id": "items",
    "label": "Items",
    "type": "flex-list",
    "defaultValue": [
      {
        "_id": "item1",
        "title": "Question 1",
        "body": "Answer text goes here."
      },
      {
        "_id": "item2",
        "title": "Question 2",
        "body": "Another answer text goes here."
      }
    ],
    "manifestOptions": [
      {
        "id": "title",
        "label": "Title",
        "type": "text",
        "defaultValue": "Question"
      },
      {
        "id": "body",
        "label": "Body",
        "type": "text",
        "defaultValue": "Answer"
      }
    ]
  }
]