Card with header badge and actions

<!--
  Расхождение с апстримом: `IconPlaceholder` заменена инлайновым `<svg>`
  (lucide-react v0.545.0 "check"/"more-vertical") — см. docs/PORTING.md §5.
-->
<script setup lang="ts">
import { Badge } from "@/components/reui/badge"
import { Avatar, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage } from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
</script>

<template>
  <Card class="w-full max-w-sm p-0">
    <CardContent class="p-0">
      <div class="flex items-center justify-between border-b px-3 py-2">
        <Badge variant="secondary">
          <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="lucide lucide-check"
          ><path d="M20 6 9 17l-5-5" /></svg>
          Live
        </Badge>
        <DropdownMenu>
          <DropdownMenuTrigger as-child>
            <Button
              variant="ghost"
              size="icon"
              class="text-muted-foreground"
              aria-label="More options"
            >
              <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="lucide lucide-more-vertical"
              ><circle cx="12" cy="12" r="1" /><circle cx="12" cy="5" r="1" /><circle cx="12" cy="19" r="1" /></svg>
            </Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent class="w-32" align="end">
            <DropdownMenuGroup>
              <DropdownMenuItem>Edit</DropdownMenuItem>
              <DropdownMenuItem>Copy link</DropdownMenuItem>
            </DropdownMenuGroup>
          </DropdownMenuContent>
        </DropdownMenu>
      </div>
      <div class="space-y-3 p-4">
        <div class="flex items-start justify-between gap-2">
          <h3 class="text-sm leading-tight font-medium">
            Integration name
          </h3>
          <Badge variant="success-light" size="sm">
            Installed
          </Badge>
        </div>
        <p class="text-muted-foreground text-sm">
          Short description of the integration and what it does in one line.
        </p>
        <AvatarGroup>
          <Avatar class="size-6">
            <AvatarImage
              src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs="
              alt="User 1"
            />
            <AvatarFallback>SC</AvatarFallback>
          </Avatar>
          <Avatar class="size-6">
            <AvatarImage
              src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs="
              alt="User 2"
            />
            <AvatarFallback>MR</AvatarFallback>
          </Avatar>
          <Avatar class="size-6">
            <AvatarImage
              src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs="
              alt="User 3"
            />
            <AvatarFallback>EW</AvatarFallback>
          </Avatar>
          <AvatarGroupCount class="size-6 border text-[10px]">
            +3
          </AvatarGroupCount>
        </AvatarGroup>
      </div>
      <div class="border-t p-3">
        <Button variant="outline" class="w-full">
          Open
        </Button>
      </div>
    </CardContent>
  </Card>
</template>