Empty state with search input

<!--
  Расхождение с апстримом: `IconPlaceholder` заменена инлайновым `<svg>`
  (lucide-react v0.545.0 "circle-dashed") — см. docs/PORTING.md §5.
-->
<script setup lang="ts">
import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyTitle } from "@/components/ui/empty"
import { InputGroup, InputGroupAddon, InputGroupInput } from "@/components/ui/input-group"
import { Kbd } from "@/components/ui/kbd"
</script>

<template>
  <div class="flex items-center justify-center">
    <Empty class="border">
      <EmptyHeader>
        <EmptyTitle>404 — Not Found</EmptyTitle>
        <EmptyDescription>
          The page you're looking for doesn't exist. Try searching for what you need below.
        </EmptyDescription>
      </EmptyHeader>
      <EmptyContent>
        <InputGroup class="w-3/4">
          <InputGroupInput placeholder="Try searching for pages…" />
          <InputGroupAddon>
            <svg
              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"
              class="lucide lucide-circle-dashed"
            >
              <path d="M10.1 2.182a10 10 0 0 1 3.8 0" />
              <path d="M13.9 21.818a10 10 0 0 1-3.8 0" />
              <path d="M17.609 3.721a10 10 0 0 1 2.69 2.7" />
              <path d="M2.182 13.9a10 10 0 0 1 0-3.8" />
              <path d="M20.279 17.609a10 10 0 0 1-2.7 2.69" />
              <path d="M21.818 10.1a10 10 0 0 1 0 3.8" />
              <path d="M3.721 6.391a10 10 0 0 1 2.7-2.69" />
              <path d="M6.391 20.279a10 10 0 0 1-2.69-2.7" />
            </svg>
          </InputGroupAddon>
          <InputGroupAddon align="inline-end">
            <Kbd>/</Kbd>
          </InputGroupAddon>
        </InputGroup>
        <EmptyDescription>
          Need help? <a href="#">Contact support</a>
        </EmptyDescription>
      </EmptyContent>
    </Empty>
  </div>
</template>