Accordion

import { Accordion } from "@/components/ui/Accordion";

export const DefaultAccordionExample = () => {
  return <Accordion />;
};

import { Accordion } from "@/components/ui/Accordion";

export const AllowMultipleExample = () => {
  return (
    <Accordion
      allowMultiple
      items={[
        {
          title: "Section 1",
          content:
            "This section can be open alongside others when allowMultiple is enabled.",
        },
        {
          title: "Section 2",
          content:
            "Multiple sections can be expanded simultaneously for better content comparison.",
        },
        {
          title: "Section 3",
          content:
            "This provides flexibility for users who want to reference multiple sections at once.",
        },
      ]}
    />
  );
};

import { Accordion } from "@/components/ui/Accordion";

export const BorderedExample = () => {
  return (
    <Accordion
      variant="bordered"
      items={[
        {
          title: "Features",
          content:
            "Clean borders around each accordion item for a more defined look.",
        },
        {
          title: "Styling",
          content:
            "The bordered variant adds visual separation between accordion items.",
        },
      ]}
    />
  );
};

import { Accordion } from "@/components/ui/Accordion";

export const FilledLargeExample = () => {
  return (
    <Accordion
      variant="filled"
      size="lg"
      items={[
        {
          title: "Enhanced Visibility",
          content:
            "The filled variant provides a subtle background color that enhances readability and creates better visual hierarchy.",
        },
        {
          title: "Large Text Size",
          content:
            "Larger text size improves accessibility and readability, especially useful for content-heavy accordions.",
        },
      ]}
    />
  );
};