Search empty state with stacked file cards 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>
          <div class="relative h-32 w-56" aria-hidden="true">
            <div class="bg-muted/50 dark:bg-muted/25 border-border/40 absolute right-6 bottom-4 left-6 flex h-12 items-center gap-2.5 rounded-lg border px-3">
              <div class="bg-muted-foreground/10 size-5 shrink-0 rounded" />
              <div class="flex flex-1 flex-col gap-1">
                <div class="bg-muted-foreground/10 h-2 w-full rounded" />
                <div class="bg-muted-foreground/8 h-2 w-2/3 rounded" />
              </div>
            </div>
            <div class="bg-muted/70 dark:bg-muted/40 border-border/50 absolute right-3 bottom-8 left-3 flex h-12 items-center gap-2.5 rounded-lg border px-3">
              <div class="bg-muted-foreground/12 size-5 shrink-0 rounded" />
              <div class="flex flex-1 flex-col gap-1">
                <div class="bg-muted-foreground/12 h-2 w-full rounded" />
                <div class="bg-muted-foreground/10 h-2 w-3/4 rounded" />
              </div>
            </div>
            <div class="bg-background border-border absolute inset-x-0 bottom-12 flex h-14 items-center gap-3 rounded-lg border px-3.5 shadow-sm">
              <div class="bg-muted size-7 shrink-0 rounded" />
              <div class="flex flex-1 flex-col gap-1.5">
                <div class="bg-muted h-2.5 w-full rounded" />
                <div class="bg-muted/70 h-2 w-3/5 rounded" />
              </div>
            </div>
            <div class="from-background/0 to-background pointer-events-none absolute inset-x-0 bottom-0 h-10 bg-linear-to-b" />
          </div>
        </EmptyMedia>
        <EmptyTitle>Looking for something?</EmptyTitle>
        <EmptyDescription>
          Type a keyword and we'll search through files, folders, #tags, and transcripts.
        </EmptyDescription>
      </EmptyHeader>
    </Empty>
  </div>
</template>