Accordion

import {
  Accordion,
  AccordionItem,
  AccordionPanel,
  AccordionTrigger,
} from "@/components/ui/accordion";

export default function Particle() {
  const items = [
    {
      content:
        "Base UI — это библиотека качественных нестилизованных React-компонентов для дизайн-систем и веб-приложений.",
      id: "1",
      title: "Что такое Base UI?",
    },
    {
      content:
        "Откройте руководство «Быстрый старт» в документации. Если вы уже работали с нестилизованными библиотеками, всё будет привычно.",
      id: "2",
      title: "С чего начать?",
    },
    {
      content: "Конечно! Base UI бесплатна и имеет открытый исходный код.",
      id: "3",
      title: "Можно ли использовать её в моём проекте?",
    },
  ];

  return (
    <Accordion className="w-full" defaultValue={["3"]}>
      {items.map((item) => (
        <AccordionItem key={item.id} value={item.id}>
          <AccordionTrigger>{item.title}</AccordionTrigger>
          <AccordionPanel>{item.content}</AccordionPanel>
        </AccordionItem>
      ))}
    </Accordion>
  );
}

import {
  Accordion,
  AccordionItem,
  AccordionPanel,
  AccordionTrigger,
} from "@/components/ui/accordion";

export default function Particle() {
  return (
    <Accordion className="w-full">
      <AccordionItem value="item-1">
        <AccordionTrigger>Что такое Base UI?</AccordionTrigger>
        <AccordionPanel>
          Base UI — это библиотека качественных нестилизованных
          React-компонентов для дизайн-систем и веб-приложений.
        </AccordionPanel>
      </AccordionItem>
      <AccordionItem value="item-2">
        <AccordionTrigger>С чего начать?</AccordionTrigger>
        <AccordionPanel>
          Откройте руководство «Быстрый старт» в документации. Если вы уже
          работали с нестилизованными библиотеками, всё будет привычно.
        </AccordionPanel>
      </AccordionItem>
      <AccordionItem value="item-3">
        <AccordionTrigger>
          Можно ли использовать её в моём проекте?
        </AccordionTrigger>
        <AccordionPanel>
          Конечно! Base UI бесплатна и имеет открытый исходный код.
        </AccordionPanel>
      </AccordionItem>
    </Accordion>
  );
}

import {
  Accordion,
  AccordionItem,
  AccordionPanel,
  AccordionTrigger,
} from "@/components/ui/accordion";

export default function Particle() {
  return (
    <Accordion className="w-full" multiple>
      <AccordionItem value="item-1">
        <AccordionTrigger>Что такое Base UI?</AccordionTrigger>
        <AccordionPanel>
          Base UI — это библиотека качественных нестилизованных
          React-компонентов для дизайн-систем и веб-приложений.
        </AccordionPanel>
      </AccordionItem>
      <AccordionItem value="item-2">
        <AccordionTrigger>С чего начать?</AccordionTrigger>
        <AccordionPanel>
          Откройте руководство «Быстрый старт» в документации. Если вы уже
          работали с нестилизованными библиотеками, всё будет привычно.
        </AccordionPanel>
      </AccordionItem>
      <AccordionItem value="item-3">
        <AccordionTrigger>
          Можно ли использовать её в моём проекте?
        </AccordionTrigger>
        <AccordionPanel>
          Конечно! Base UI бесплатна и имеет открытый исходный код.
        </AccordionPanel>
      </AccordionItem>
    </Accordion>
  );
}

"use client";

import { useState } from "react";
import {
  Accordion,
  AccordionItem,
  AccordionPanel,
  AccordionTrigger,
} from "@/components/ui/accordion";
import { Button } from "@/components/ui/button";

export default function Particle() {
  const [value, setValue] = useState<string[]>([]);

  return (
    <div className="flex w-full flex-col gap-4">
      <Accordion className="w-full" onValueChange={setValue} value={value}>
        <AccordionItem value="item-1">
          <AccordionTrigger>Что такое Base UI?</AccordionTrigger>
          <AccordionPanel>
            Base UI — это библиотека качественных нестилизованных
            React-компонентов для дизайн-систем и веб-приложений.
          </AccordionPanel>
        </AccordionItem>
        <AccordionItem value="item-2">
          <AccordionTrigger>С чего начать?</AccordionTrigger>
          <AccordionPanel>
            Откройте руководство «Быстрый старт» в документации. Если вы уже
            работали с нестилизованными библиотеками, всё будет привычно.
          </AccordionPanel>
        </AccordionItem>
        <AccordionItem value="item-3">
          <AccordionTrigger>
            Можно ли использовать её в моём проекте?
          </AccordionTrigger>
          <AccordionPanel>
            Конечно! Base UI бесплатна и имеет открытый исходный код.
          </AccordionPanel>
        </AccordionItem>
      </Accordion>

      <div className="flex flex-col items-start gap-4">
        <Button
          onClick={() => setValue(["item-1", "item-2"])}
          variant="outline"
        >
          Открыть первые два
        </Button>
        <p className="text-muted-foreground text-sm">
          Открытые элементы: {value.length > 0 ? value.join(", ") : "Нет"}
        </p>
      </div>
    </div>
  );
}