Accordion

import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@fanvue/ui";
import type {
  AccordionContentProps,
  AccordionItemProps,
  AccordionProps,
  AccordionTriggerProps,
} from "@fanvue/ui";

import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@fanvue/ui";

<Accordion type="single" collapsible className="max-w-md">
  <AccordionItem value="item-1">
    <AccordionTrigger>What is your refund policy?</AccordionTrigger>
    <AccordionContent>
      If you are unhappy with your purchase, we will refund you in full within the first 30
      days.
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-2">
    <AccordionTrigger>How do I cancel my subscription?</AccordionTrigger>
    <AccordionContent>
      You can cancel your subscription at any time from your account settings page.
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-3">
    <AccordionTrigger>Can I change my plan later?</AccordionTrigger>
    <AccordionContent>
      Yes, you can upgrade or downgrade your plan at any time. Changes take effect immediately.
    </AccordionContent>
  </AccordionItem>
</Accordion>

import { useState } from "react";
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@fanvue/ui";

function Example() {
  const [value, setValue] = useState("item-1");
  return (
    <div className="max-w-md space-y-4">
      <p className="typography-description-12px-regular text-content-secondary">
        Current value: <strong>{value || "(none)"}</strong>
      </p>
      <Accordion type="single" collapsible value={value} onValueChange={setValue}>
        <AccordionItem value="item-1">
          <AccordionTrigger>Controlled Section 1</AccordionTrigger>
          <AccordionContent>Content for section 1.</AccordionContent>
        </AccordionItem>
        <AccordionItem value="item-2">
          <AccordionTrigger>Controlled Section 2</AccordionTrigger>
          <AccordionContent>Content for section 2.</AccordionContent>
        </AccordionItem>
        <AccordionItem value="item-3">
          <AccordionTrigger>Controlled Section 3</AccordionTrigger>
          <AccordionContent>Content for section 3.</AccordionContent>
        </AccordionItem>
      </Accordion>
    </div>
  );
}

import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@fanvue/ui";

<div className="flex flex-col gap-8">
  <div>
    <p className="typography-body-small-14px-semibold mb-4 text-content-tertiary">
      Single, Collapsible
    </p>
    <Accordion type="single" collapsible defaultValue="item-1" className="max-w-sm">
      <AccordionItem value="item-1">
        <AccordionTrigger>Expanded</AccordionTrigger>
        <AccordionContent>Expanded content</AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-2">
        <AccordionTrigger>Collapsed</AccordionTrigger>
        <AccordionContent>Collapsed content</AccordionContent>
      </AccordionItem>
    </Accordion>
  </div>
  <div>
    <p className="typography-body-small-14px-semibold mb-4 text-content-tertiary">
      Disabled Item
    </p>
    <Accordion type="single" collapsible className="max-w-sm">
      <AccordionItem value="item-1">
        <AccordionTrigger>Enabled</AccordionTrigger>
        <AccordionContent>Enabled content</AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-2" disabled>
        <AccordionTrigger>Disabled</AccordionTrigger>
        <AccordionContent>Disabled content</AccordionContent>
      </AccordionItem>
    </Accordion>
  </div>
  <div>
    <p className="typography-body-small-14px-semibold mb-4 text-content-tertiary">
      Multiple Mode
    </p>
    <Accordion type="multiple" defaultValue={["item-1", "item-2"]} className="max-w-sm">
      <AccordionItem value="item-1">
        <AccordionTrigger>Open 1</AccordionTrigger>
        <AccordionContent>Both items open at once</AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-2">
        <AccordionTrigger>Open 2</AccordionTrigger>
        <AccordionContent>Both items open at once</AccordionContent>
      </AccordionItem>
    </Accordion>
  </div>
  <div>
    <p className="typography-body-small-14px-semibold mb-4 text-content-tertiary">
      Root Disabled
    </p>
    <Accordion type="single" collapsible disabled className="max-w-sm">
      <AccordionItem value="item-1">
        <AccordionTrigger>Disabled 1</AccordionTrigger>
        <AccordionContent>Content 1</AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-2">
        <AccordionTrigger>Disabled 2</AccordionTrigger>
        <AccordionContent>Content 2</AccordionContent>
      </AccordionItem>
    </Accordion>
  </div>
</div>

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
  Avatar,
  CrownIcon,
} from "@fanvue/ui";

const avatarSrc = "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=96&h=96&fit=crop";

<Accordion type="multiple" defaultValue={["desc", "icon", "avatar"]} className="max-w-md">
  <AccordionItem value="title">
    <AccordionTrigger>Title only</AccordionTrigger>
    <AccordionContent>The default header with just a title.</AccordionContent>
  </AccordionItem>
  <AccordionItem value="desc">
    <AccordionTrigger description="With a secondary description line.">
      Title + description
    </AccordionTrigger>
    <AccordionContent>Adds context under the title.</AccordionContent>
  </AccordionItem>
  <AccordionItem value="icon">
    <AccordionTrigger leadingIcon={<CrownIcon />} description="With a leading icon.">
      Title + icon
    </AccordionTrigger>
    <AccordionContent>A leading icon identifies the section type.</AccordionContent>
  </AccordionItem>
  <AccordionItem value="avatar">
    <AccordionTrigger
      avatar={<Avatar size={24} src={avatarSrc} alt="Jane Doe" fallback="JD" />}
      description="@jane_doe"
    >
      Title + avatar
    </AccordionTrigger>
    <AccordionContent>An avatar identifies a person or account.</AccordionContent>
  </AccordionItem>
</Accordion>