Accordion

import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@bindshq/stance-react';

const faqs = [
  [
    'deploy',
    'How are signatures deployed?',
    'eSignify pushes signatures through your Exchange relay, so every email sent from Outlook, mobile or web gets the right signature.',
  ],
  [
    'change',
    'Can people edit their own details?',
    'Yes. Admins choose which fields people can edit, such as job title or phone number. Everything else is locked to the template.',
  ],
  [
    'remove',
    'What happens when someone leaves?',
    'Removing a user stops future deployments. Their last signature stays in sent mail but is no longer updated.',
  ],
] as const;

export function Basic() {
  return (
    <Accordion defaultValue="deploy">
      {faqs.map(([value, q, a]) => (
        <AccordionItem key={value} value={value}>
          <AccordionTrigger>{q}</AccordionTrigger>
          <AccordionContent>{a}</AccordionContent>
        </AccordionItem>
      ))}
    </Accordion>
  );
}

import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@bindshq/stance-react';

const faqs = [
  [
    'deploy',
    'How are signatures deployed?',
    'eSignify pushes signatures through your Exchange relay, so every email sent from Outlook, mobile or web gets the right signature.',
  ],
  [
    'change',
    'Can people edit their own details?',
    'Yes. Admins choose which fields people can edit, such as job title or phone number. Everything else is locked to the template.',
  ],
  [
    'remove',
    'What happens when someone leaves?',
    'Removing a user stops future deployments. Their last signature stays in sent mail but is no longer updated.',
  ],
] as const;

export function Multiple() {
  return (
    <Accordion type="multiple" defaultValue={['deploy', 'change']}>
      {faqs.map(([value, q, a]) => (
        <AccordionItem key={value} value={value}>
          <AccordionTrigger>{q}</AccordionTrigger>
          <AccordionContent>{a}</AccordionContent>
        </AccordionItem>
      ))}
    </Accordion>
  );
}

import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@bindshq/stance-react';

export function Separated() {
  return (
    <Accordion variant="separated" headingLevel={4}>
      <AccordionItem value="relay">
        <AccordionTrigger>Exchange relay</AccordionTrigger>
        <AccordionContent>Connected to smtp.binds.si on port 587.</AccordionContent>
      </AccordionItem>
      <AccordionItem value="azure">
        <AccordionTrigger>Azure AD sync</AccordionTrigger>
        <AccordionContent>Syncs users and departments every hour.</AccordionContent>
      </AccordionItem>
      <AccordionItem value="google" disabled>
        <AccordionTrigger>Google Workspace (coming soon)</AccordionTrigger>
        <AccordionContent>Not yet available.</AccordionContent>
      </AccordionItem>
    </Accordion>
  );
}