extended-08

1<script setup lang="ts">
2import { Button } from "@/registry/default/ui/button";
3import {
4  Empty,
5  EmptyContent,
6  EmptyDescription,
7  EmptyHeader,
8  EmptyMedia,
9  EmptyTitle,
10} from "@/registry/default/ui/empty";
11import {
12  LucideCalendar,
13  LucideFile,
14  LucidePlus,
15  LucideRefreshCcw,
16  LucideUser,
17} from "lucide-vue-next";
18</script>
19 
20<template>
21  <Empty>
22    <EmptyHeader>
23      <EmptyMedia>
24        <div class="flex items-center gap-3">
25          <div class="-rotate-8 rounded-md border p-3 shadow">
26            <LucideFile class="text-muted-foreground size-5" />
27          </div>
28          <div class="-translate-y-2 rounded-md border p-3 shadow">
29            <LucideCalendar class="text-muted-foreground size-5" />
30          </div>
31          <div class="rotate-8 rounded-md border p-3 shadow">
32            <LucideUser class="text-muted-foreground size-5" />
33          </div>
34        </div>
35      </EmptyMedia>
36      <EmptyTitle class="font-semibold">No data found</EmptyTitle>
37      <EmptyDescription>
38        It looks like there's no data in this page. You can create a new one or refresh the page.
39      </EmptyDescription>
40    </EmptyHeader>
41    <EmptyContent>
42      <div class="flex items-center gap-2">
43        <Button>
44          <LucidePlus class="size-4" />
45          <span>Create new</span>
46        </Button>
47        <Button variant="outline">
48          <LucideRefreshCcw class="size-4" />
49          <span>Refresh</span>
50        </Button>
51      </div>
52    </EmptyContent>
53  </Empty>
54</template>