No integrations empty state with connected nodes illustration

<script setup lang="ts">
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="py-12">
      <EmptyHeader>
        <EmptyMedia>
          <svg width="200" height="120" viewBox="0 0 200 120" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
            <line x1="100" y1="60" x2="44" y2="30" class="stroke-border" stroke-width="1.5" stroke-dasharray="4 3" />
            <line x1="100" y1="60" x2="44" y2="90" class="stroke-border" stroke-width="1.5" stroke-dasharray="4 3" />
            <line x1="100" y1="60" x2="156" y2="30" class="stroke-border" stroke-width="1.5" stroke-dasharray="4 3" />
            <line x1="100" y1="60" x2="156" y2="90" class="stroke-border" stroke-width="1.5" stroke-dasharray="4 3" />

            <circle cx="100" cy="60" r="18" class="fill-primary/10 dark:fill-primary/15 stroke-primary/40" stroke-width="1.5" />
            <circle cx="100" cy="60" r="6" class="fill-primary/30" />
            <circle cx="100" cy="60" r="2.5" class="fill-primary" />

            <circle cx="44" cy="30" r="14" class="fill-muted dark:fill-muted/60 stroke-border" stroke-width="1.5" />
            <rect x="37" y="26" width="14" height="3" rx="1.5" class="fill-muted-foreground/20" />
            <rect x="40" y="32" width="8" height="2" rx="1" class="fill-muted-foreground/12" />

            <circle cx="44" cy="90" r="14" class="fill-muted dark:fill-muted/60 stroke-border" stroke-width="1.5" />
            <rect x="37" y="86" width="14" height="3" rx="1.5" class="fill-muted-foreground/20" />
            <rect x="40" y="92" width="8" height="2" rx="1" class="fill-muted-foreground/12" />

            <circle cx="156" cy="30" r="14" class="fill-muted dark:fill-muted/60 stroke-border" stroke-width="1.5" />
            <rect x="149" y="26" width="14" height="3" rx="1.5" class="fill-muted-foreground/20" />
            <rect x="152" y="32" width="8" height="2" rx="1" class="fill-muted-foreground/12" />

            <circle cx="156" cy="90" r="14" class="fill-muted dark:fill-muted/60 stroke-border" stroke-width="1.5" />
            <rect x="149" y="86" width="14" height="3" rx="1.5" class="fill-muted-foreground/20" />
            <rect x="152" y="92" width="8" height="2" rx="1" class="fill-muted-foreground/12" />

            <circle cx="72" cy="40" r="2" class="fill-primary/15" />
            <circle cx="128" cy="80" r="2" class="fill-primary/15" />
            <circle cx="72" cy="80" r="1.5" class="fill-muted-foreground/10" />
            <circle cx="128" cy="40" r="1.5" class="fill-muted-foreground/10" />
          </svg>
        </EmptyMedia>
        <EmptyTitle>No integrations</EmptyTitle>
        <EmptyDescription>
          Connect your tools and services to streamline your workflow.
        </EmptyDescription>
      </EmptyHeader>
      <EmptyContent>
        <div class="flex gap-2">
          <Button>Browse integrations</Button>
          <Button variant="outline">Learn more</Button>
        </div>
      </EmptyContent>
    </Empty>
  </div>
</template>