User list accordion with avatars and role indicators

<script setup lang="ts">
import { Badge } from "@/components/reui/badge"
import { Frame, FramePanel } from "@/components/reui/frame"
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"

const users = [
  {
    id: "1",
    name: "Alex Johnson",
    email: "alex@apple.com",
    role: "Admin",
    avatar: "https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=96&h=96&dpr=2&q=80",
    initials: "AJ",
    content:
      "Alex has full administrative access to the platform, including billing management, user provisioning, and security configurations.",
  },
  {
    id: "2",
    name: "Sarah Chen",
    email: "sarah@openai.com",
    role: "Viewer",
    avatar: "https://images.unsplash.com/photo-1519699047748-de8e457a634e?w=96&h=96&dpr=2&q=80",
    initials: "SC",
    content: "Sarah has read-only access to projects and reports. She cannot modify settings or invite new members.",
  },
  {
    id: "3",
    name: "Michael Rodriguez",
    email: "michael@meta.com",
    role: "Editor",
    avatar: "https://images.unsplash.com/photo-1584308972272-9e4e7685e80f?w=96&h=96&dpr=2&q=80",
    initials: "MR",
    content:
      "Michael is part of the design team and has permissions to edit projects, manage assets, and update design system components.",
  },
]
</script>

<template>
  <div class="mx-auto mb-auto w-full max-w-lg">
    <Frame stacked spacing="sm">
      <FramePanel v-for="user in users" :key="user.id">
        <Accordion type="single" collapsible default-value="1" class="border-none">
          <AccordionItem :value="user.id" class="border-none bg-transparent p-0 **:data-[slot=accordion-content]:p-0!">
            <AccordionTrigger class="items-center px-1 py-1 hover:no-underline">
              <div class="flex items-center gap-2">
                <Avatar class="size-8 border">
                  <AvatarImage :src="user.avatar" :alt="user.name" />
                  <AvatarFallback class="text-xs">{{ user.initials }}</AvatarFallback>
                </Avatar>
                <div class="inline-flex items-center gap-2">
                  <span class="text-foreground/90 font-semibold tracking-tight">{{ user.name }}</span>
                  <Badge :variant="user.role === 'Admin' ? 'success-light' : 'secondary'" size="sm">
                    {{ user.role }}
                  </Badge>
                </div>
              </div>
            </AccordionTrigger>
            <AccordionContent class="text-muted-foreground py-0 pl-11">{{ user.content }}</AccordionContent>
          </AccordionItem>
        </Accordion>
      </FramePanel>
    </Frame>
  </div>
</template>