No automations empty state with toggle 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">
            <path d="M30 60 L68 60" class="stroke-muted-foreground/30" stroke-width="2" stroke-linecap="round" marker-end="url(#arrowhead)" />
            <polygon points="66,56 74,60 66,64" class="fill-muted-foreground/30" />
            <rect x="76" y="42" width="56" height="36" rx="18" class="stroke-primary/60 fill-primary/5 dark:fill-primary/10" stroke-width="2" />
            <circle cx="94" cy="60" r="12" class="fill-primary/40" />
            <circle cx="94" cy="60" r="6" class="fill-primary" />
            <path d="M134 60 Q150 60 158 48" class="stroke-muted-foreground/30" stroke-width="2" fill="none" stroke-linecap="round" />
            <circle cx="162" cy="44" r="3" class="fill-muted-foreground/20" />
            <path d="M134 60 Q150 60 158 72" class="stroke-muted-foreground/30" stroke-width="2" fill="none" stroke-linecap="round" />
            <circle cx="162" cy="76" r="3" class="fill-muted-foreground/20" />
            <circle cx="22" cy="60" r="2" class="fill-muted-foreground/20" />
            <circle cx="174" cy="44" r="2" class="fill-muted-foreground/15" />
            <circle cx="174" cy="76" r="2" class="fill-muted-foreground/15" />
          </svg>
        </EmptyMedia>
        <EmptyTitle>No automations yet</EmptyTitle>
        <EmptyDescription>
          Hook up your favorite tools and let the automation magic begin.
        </EmptyDescription>
      </EmptyHeader>
      <EmptyContent>
        <Button>Create new automation</Button>
      </EmptyContent>
    </Empty>
  </div>
</template>