Accordion with rotating arrow indicator

<!--
  Расхождение с апстримом: `IconPlaceholder` заменена инлайновым `<svg>`
  (lucide-react v0.545.0 "chevron-right") — см. docs/PORTING.md §5.
-->
<script setup lang="ts">
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"

const items = [
  {
    value: "item-1",
    trigger: "Can I use this for my project?",
    content: "Yes, you can use ReUI for any of your personal or commercial projects. The library is distributed under the MIT license.",
  },
  {
    value: "item-2",
    trigger: "Is there a Figma file available?",
    content: "We are currently working on a comprehensive Figma design system that will be released soon to all ReUI users.",
  },
  {
    value: "item-3",
    trigger: "How do I contribute to ReUI?",
    content: "You can contribute by reporting bugs, suggesting features, or submitting pull requests on our GitHub repository.",
  },
]
</script>

<template>
  <div class="mx-auto mb-auto w-full max-w-lg">
    <Accordion type="single" collapsible default-value="item-1">
      <AccordionItem v-for="item in items" :key="item.value" :value="item.value">
        <AccordionTrigger
          class="flex-row-reverse items-center justify-end gap-3 py-3 hover:no-underline *:data-[slot=accordion-trigger-icon]:hidden"
        >
          <span class="text-foreground/90 font-medium">{{ item.trigger }}</span>
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="text-muted-foreground size-4 shrink-0 transition-transform duration-200 group-aria-expanded/accordion-trigger:rotate-90"
          >
            <path d="m9 18 6-6-6-6" />
          </svg>
        </AccordionTrigger>
        <AccordionContent class="text-muted-foreground ps-7 leading-relaxed">{{ item.content }}</AccordionContent>
      </AccordionItem>
    </Accordion>
  </div>
</template>