Comments empty state with isometric board illustration

<script setup lang="ts">
import { Empty, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "@/components/ui/empty"
</script>

<template>
  <div class="flex items-center justify-center p-4">
    <Empty class="py-12">
      <EmptyHeader>
        <EmptyMedia>
          <svg width="180" height="160" viewBox="0 0 180 160" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
            <ellipse cx="90" cy="148" rx="60" ry="8" class="fill-muted-foreground/8 dark:fill-muted-foreground/5" />
            <path d="M30 40 L90 10 L160 45 L100 75 Z" class="fill-muted/80 dark:fill-muted/40 stroke-border" stroke-width="1.5" stroke-linejoin="round" />
            <path d="M30 40 L100 75 L100 110 L30 75 Z" class="fill-muted dark:fill-muted/60 stroke-border" stroke-width="1.5" stroke-linejoin="round" />
            <path d="M100 75 L160 45 L160 80 L100 110 Z" class="fill-background stroke-border" stroke-width="1.5" stroke-linejoin="round" />

            <circle cx="62" cy="35" r="4" class="fill-primary/20" />
            <line x1="72" y1="33" x2="105" y2="17" class="stroke-muted-foreground/20" stroke-width="4" stroke-linecap="round" />
            <line x1="110" y1="15" x2="130" y2="5" class="stroke-muted-foreground/15" stroke-width="4" stroke-linecap="round" />

            <circle cx="55" cy="50" r="4" class="fill-primary/30" />
            <line x1="65" y1="48" x2="100" y2="31" class="stroke-muted-foreground/20" stroke-width="4" stroke-linecap="round" />
            <line x1="105" y1="29" x2="135" y2="14" class="stroke-muted-foreground/12" stroke-width="4" stroke-linecap="round" />

            <circle cx="48" cy="65" r="4" class="fill-destructive/25" />
            <line x1="58" y1="63" x2="88" y2="48" class="stroke-muted-foreground/18" stroke-width="4" stroke-linecap="round" />
          </svg>
        </EmptyMedia>
        <EmptyTitle>Be the first to share a thought</EmptyTitle>
        <EmptyDescription>
          Drop a comment on the canvas to get the conversation started.
        </EmptyDescription>
      </EmptyHeader>
    </Empty>
  </div>
</template>