空状态 Empty

<script setup lang="ts">
import { Button, Empty } from "@bysages/vue";
</script>

<template>
  <Empty.Root>
    <Empty.Visual>
      <svg
        width="56"
        height="56"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="1.5"
        stroke-linecap="round"
        stroke-linejoin="round"
        aria-hidden="true"
      >
        <polyline points="22 12 16 12 14 15 10 15 8 12 2 12" />
        <path
          d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"
        />
      </svg>
    </Empty.Visual>
    <Empty.Title>No letters yet</Empty.Title>
    <Empty.Description
      >Letters addressed to the archive will rest here until they are read.</Empty.Description
    >
    <Empty.Actions>
      <Button variant="solid" tone="ink" size="sm">Write a letter</Button>
      <Button variant="ghost" tone="ink" size="sm">Learn more</Button>
    </Empty.Actions>
  </Empty.Root>
</template>