Faq (问答FAQ)

import { Faq } from '@anker-in/headless-ui/biz'
import scenarios from './scenarios.json'
 
<Faq
  data={{
    productData: [
      {
        title: 'What is your return policy?',
        desc: 'You can return any product within 30 days of purchase for a full refund.',
        img: {
          url: 'https://images.unsplash.com/photo-...',
          alt: 'Return Policy',
        },
      },
      {
        title: 'How long does shipping take?',
        desc: 'Standard shipping takes 5-7 business days. Express shipping is available for 2-3 days.',
        img: {
          url: 'https://images.unsplash.com/photo-...',
          alt: 'Shipping',
        },
      },
    ],
  }}
/>

<Faq
  data={{
    productData: [
      {
        title: 'What is your return policy?',
        desc: 'You can return any product within 30 days of purchase for a full refund.',
        img: {
          url: 'https://images.unsplash.com/photo-...',
          alt: 'Return Policy',
        },
      },
      {
        title: 'How long does shipping take?',
        desc: 'Standard shipping takes 5-7 business days. Express shipping is available for 2-3 days.',
        img: {
          url: 'https://images.unsplash.com/photo-...',
          alt: 'Shipping',
        },
      },
      {
        title: 'Do you offer international shipping?',
        desc: 'Yes, we ship to over 50 countries worldwide. Shipping costs and times vary by destination.',
        img: {
          url: 'https://images.unsplash.com/photo-...',
          alt: 'International Shipping',
        },
      },
    ],
  }}
/>

<Faq
  data={{
    productData: [
      {
        title: '<strong>How do I track my order?</strong>',
        desc: `
          <p>You can track your order by:</p>
          <ol>
            <li>Visiting the <a href="/orders">Order Tracking page</a></li>
            <li>Entering your order number and email</li>
            <li>Click "Track Order"</li>
          </ol>
        `,
        img: {
          url: 'https://images.unsplash.com/photo-...',
          alt: 'Order Tracking',
        },
      },
    ],
  }}
/>

<Faq
  data={{
    productData: faqList,
  }}
  className="max-w-4xl mx-auto py-12 px-4"
/>