Empty state illustration

<!--
  Адаптировано (docs/PORTING.md §5): `IconPlaceholder` заменён инлайновым
  `<svg>` (пути lucide "inbox"/"user-plus"/"database"), теми же, что и в
  React-эталоне.
-->
<script setup lang="ts">
import { IconStack } from "@/components/reui/icon-stack"
import { Button } from "@/components/ui/button"
import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "@/components/ui/empty"
</script>

<template>
  <div class="flex items-center justify-center p-4">
    <Empty class="max-w-md py-10">
      <EmptyHeader>
        <EmptyMedia>
          <IconStack aria-hidden="true" class="text-primary h-24 w-22">
            <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-primary size-5"
            >
              <polyline points="22 12 16 12 14 15 10 15 8 12 2 12" />
              <path
                d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"
              />
            </svg>
          </IconStack>
        </EmptyMedia>
        <EmptyTitle>Workspace is ready</EmptyTitle>
        <EmptyDescription>
          Invite teammates or connect a data source to start filling this
          view.
        </EmptyDescription>
      </EmptyHeader>

      <EmptyContent class="flex-row justify-center gap-2">
        <Button size="sm">
          <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"
            data-icon="inline-start"
          >
            <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
            <circle cx="9" cy="7" r="4" />
            <line x1="19" x2="19" y1="8" y2="14" />
            <line x1="22" x2="16" y1="11" y2="11" />
          </svg>
          Invite team
        </Button>
        <Button variant="outline" size="sm">
          <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"
            data-icon="inline-start"
          >
            <ellipse cx="12" cy="5" rx="9" ry="3" />
            <path d="M3 5V19A9 3 0 0 0 21 19V5" />
            <path d="M3 12A9 3 0 0 0 21 12" />
          </svg>
          Connect source
        </Button>
      </EmptyContent>
    </Empty>
  </div>
</template>