extended-06

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 { LucideFile, LucidePlus, LucideRefreshCcw } from "lucide-vue-next";
12</script>
13 
14<template>
15  <Empty>
16    <EmptyHeader>
17      <EmptyMedia variant="icon" class="rounded-full">
18        <LucideFile />
19      </EmptyMedia>
20      <EmptyTitle class="font-semibold">No data found</EmptyTitle>
21      <EmptyDescription>
22        It looks like there's no data in this page. You can create a new one or refresh the page.
23      </EmptyDescription>
24    </EmptyHeader>
25    <EmptyContent>
26      <div class="flex items-center gap-2">
27        <Button>
28          <LucidePlus class="size-4" />
29          <span>Create new</span>
30        </Button>
31        <Button variant="outline">
32          <LucideRefreshCcw class="size-4" />
33          <span>Refresh</span>
34        </Button>
35      </div>
36    </EmptyContent>
37  </Empty>
38</template>