Accordion with rotating arrow indicator

1import {
2  Accordion,
3  AccordionContent,
4  AccordionItem,
5  AccordionTrigger,
6} from "@/components/ui/accordion"
7import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
8 
9const items = [
10  {
11    value: "item-1",
12    trigger: "Can I use this for my project?",
13    content:
14      "Yes, you can use ReUI for any of your personal or commercial projects. The library is distributed under the MIT license.",
15  },
16  {
17    value: "item-2",
18    trigger: "Is there a Figma file available?",
19    content:
20      "We are currently working on a comprehensive Figma design system that will be released soon to all ReUI users.",
21  },
22  {
23    value: "item-3",
24    trigger: "How do I contribute to ReUI?",
25    content:
26      "You can contribute by reporting bugs, suggesting features, or submitting pull requests on our GitHub repository.",
27  },
28]
29 
30export function Pattern() {
31  return (
32    <div className="mx-auto mb-auto w-full max-w-lg">
33      <Accordion multiple={false} defaultValue={["item-1"]}>
34        {items.map((item) => (
35          <AccordionItem key={item.value} value={item.value}>
36            <AccordionTrigger className="flex-row-reverse items-center justify-end gap-3 py-3 hover:no-underline *:data-[slot=accordion-trigger-icon]:hidden">
37              <span className="text-foreground/90 font-medium">
38                {item.trigger}
39              </span>
40              <IconPlaceholder
41                lucide="ChevronRightIcon"
42                tabler="IconChevronRight"
43                hugeicons="ArrowRight01Icon"
44                phosphor="CaretRightIcon"
45                remixicon="RiArrowRightSLine"
46                className="text-muted-foreground size-4 shrink-0 transition-transform duration-200 group-aria-expanded/accordion-trigger:rotate-90"
47              />
48            </AccordionTrigger>
49            <AccordionContent className="text-muted-foreground ps-7 leading-relaxed">
50              {item.content}
51            </AccordionContent>
52          </AccordionItem>
53        ))}
54      </Accordion>
55    </div>
56  )
57}