Collapsible User profile

<!--
  Расхождение с апстримом: `IconPlaceholder` заменена инлайновым `<svg>`
  (lucide-react v0.545.0 "chevron-right"/"message-square"/"clock"/"map-pin")
  — см. docs/PORTING.md §5.
-->
<script setup lang="ts">
import { Frame, FrameHeader, FramePanel } from "@/components/reui/frame"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible"
</script>

<template>
  <div class="h-54 w-full max-w-xs">
    <Frame stacked dense spacing="sm" class="w-full">
      <Collapsible default-open>
        <CollapsibleTrigger class="flex w-full">
          <FrameHeader class="flex grow flex-row items-center justify-between gap-2">
            <div class="flex items-center gap-2">
              <Avatar class="relative size-5">
                <AvatarImage src="https://github.com/shadcn.png" alt="User" />
                <AvatarFallback>JD</AvatarFallback>
              </Avatar>
              <span class="text-foreground text-sm font-medium">@shadcn</span>
            </div>
            <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"
              aria-hidden="true"
              class="text-muted-foreground size-4 transition-transform in-data-[state=open]:rotate-90"
            >
              <path d="m9 18 6-6-6-6" />
            </svg>
          </FrameHeader>
        </CollapsibleTrigger>
        <CollapsibleContent>
          <FramePanel>
            <div class="space-y-2.5">
              <div class="flex items-center gap-2">
                <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"
                  aria-hidden="true"
                  class="text-muted-foreground size-3.5"
                >
                  <path
                    d="M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z"
                  />
                </svg>
                <span class="text-muted-foreground text-xs">Last activity:</span>
                <span class="text-foreground text-xs font-medium">2 hours ago</span>
              </div>
              <div class="flex items-center gap-2">
                <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"
                  aria-hidden="true"
                  class="text-muted-foreground size-3.5"
                >
                  <path d="M12 6v6l4 2" />
                  <circle cx="12" cy="12" r="10" />
                </svg>
                <span class="text-muted-foreground text-xs">Online since:</span>
                <span class="text-foreground text-xs font-medium">Today, 9:00 AM</span>
              </div>
              <div class="flex items-center gap-2">
                <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"
                  aria-hidden="true"
                  class="text-muted-foreground size-3.5"
                >
                  <path
                    d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"
                  />
                  <circle cx="12" cy="10" r="3" />
                </svg>
                <span class="text-muted-foreground text-xs">Location:</span>
                <div class="flex items-center gap-1.5">
                  <span class="text-foreground text-xs font-medium">Canada</span>
                  <img src="https://flagcdn.com/ca.svg" alt="Canada" class="size-4 shrink-0 rounded-full border object-cover" />
                </div>
              </div>
            </div>
          </FramePanel>
        </CollapsibleContent>
      </Collapsible>
    </Frame>
  </div>
</template>