Icon stack sizes

<!--
  Адаптировано (docs/PORTING.md §5): `IconPlaceholder` заменён инлайновым
  `<svg>` (пути lucide "archive"/"package"/"layers"), теми же, что и в
  React-эталоне.
-->
<script setup lang="ts">
import { IconStack } from "@/components/reui/icon-stack"

const sizes = [
  { label: "Small", class: "h-16 w-14" },
  { label: "Default", class: "h-20 w-18" },
  { label: "Large", class: "h-28 w-24" },
]
</script>

<template>
  <div class="flex flex-wrap items-end justify-center gap-8">
    <div v-for="item in sizes" :key="item.label" class="flex flex-col items-center gap-2">
      <IconStack aria-hidden="true" :class="item.class">
        <svg
          v-if="item.label === 'Small'"
          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="size-3.5"
        >
          <rect width="20" height="5" x="2" y="3" rx="1" />
          <path d="M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8" />
          <path d="M10 12h4" />
        </svg>
        <svg
          v-else-if="item.label === 'Default'"
          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="size-4"
        >
          <path
            d="M11 21.73a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73z"
          />
          <path d="M12 22V12" />
          <polyline points="3.29 7 12 12 20.71 7" />
          <path d="m7.5 4.27 9 5.15" />
        </svg>
        <svg
          v-else
          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="size-6"
        >
          <path
            d="M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z"
          />
          <path d="M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12" />
          <path d="M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17" />
        </svg>
      </IconStack>
      <span class="text-muted-foreground text-sm">{{ item.label }}</span>
    </div>
  </div>
</template>