extended-09

1<script setup lang="ts">
2import { Button } from "@/registry/default/ui/button";
3import {
4  Card,
5  CardContent,
6  CardDescription,
7  CardHeader,
8  CardTitle,
9} from "@/registry/default/ui/card";
10import {
11  Empty,
12  EmptyContent,
13  EmptyDescription,
14  EmptyHeader,
15  EmptyTitle,
16} from "@/registry/default/ui/empty";
17import { LucideIdCard, LucideUser } from "lucide-vue-next";
18</script>
19 
20<template>
21  <Empty>
22    <EmptyHeader>
23      <EmptyTitle class="font-semibold">No data found</EmptyTitle>
24      <EmptyDescription>
25        It looks like there's no data in this page. Please create a new one using the buttons below.
26      </EmptyDescription>
27    </EmptyHeader>
28    <EmptyContent class="w-full max-w-md">
29      <Card class="relative w-full overflow-hidden text-left">
30        <CardHeader>
31          <CardTitle>Create new account</CardTitle>
32          <CardDescription>Create a new account to get started.</CardDescription>
33        </CardHeader>
34        <CardContent>
35          <Button>Create account</Button>
36        </CardContent>
37        <div class="absolute -right-6 -bottom-6">
38          <LucideUser class="text-muted size-32" />
39        </div>
40      </Card>
41      <Card class="relative w-full overflow-hidden text-left">
42        <CardHeader>
43          <CardTitle>Add new card</CardTitle>
44          <CardDescription>Add a new card to your account to get started.</CardDescription>
45        </CardHeader>
46        <CardContent>
47          <Button>Add card</Button>
48        </CardContent>
49        <div class="absolute -right-6 -bottom-6">
50          <LucideIdCard class="text-muted size-32" />
51        </div>
52      </Card>
53    </EmptyContent>
54  </Empty>
55</template>