1<template>
2 <div
3 v-if="variant === 'badge'"
4 class="flex flex-col items-center justify-center gap-4 absolute inset-x-0 top-5.5 bottom-0 pointer-events-none"
5 >
6 <div
7 class="p-4 size-14.5 rounded-full bg-surface-gray-1 flex justify-center items-center"
8 >
9 <component v-if="icon" :is="icon" class="size-6 text-ink-gray-6" />
10 </div>
11 <div class="flex flex-col items-center gap-1">
12 <div class="text-base-medium text-ink-gray-6">
13 {{ __(title) }}
14 </div>
15 <div
16 v-if="descriptionText"
17 class="text-p-sm text-ink-gray-5 max-w-60 text-center"
18 >
19 {{ __(descriptionText) }}
20 </div>
21 </div>
22 </div>
23 <div
24 v-else
25 class="flex h-full items-center justify-center absolute inset-x-0 top-0 pointer-events-none"
26 >
27 <div
28 class="flex flex-col items-center gap-2 text-xl-medium text-ink-gray-4 w-9/12 md:w-4/12"
29 >
30 <!-- overlay variant (for charts) -->
31 <div
32 v-if="variant === 'overlay'"
33 class="absolute inset-0 flex flex-col items-center justify-center pointer-events-none -z-10"
34 :style="{
35 backgroundImage:
36 'radial-gradient(ellipse at center, var(--surface-base) 10%, color-mix(in srgb, var(--surface-base) 90%, transparent) 25%, transparent 70%)',
37 }"
38 />
39 <!-- Icon -->
40 <component v-if="icon" :is="icon" class="h-10 w-10" />
41 <!-- title -->
42 <div class="flex flex-col items-center justify-center gap-0.5">
43 <span
44 :class="{
45 'text-sm font-medium text-ink-gray-8': text === 'sm',
46 'text-base font-medium text-ink-gray-8': text === 'md' || !text,
47 'text-md font-medium text-ink-gray-8': text === 'lg',
48 }"
49 >
50 {{ __(title) }}
51 </span>
52 <span
53 v-if="descriptionText"
54 :class="{
55 'text-center text-p-xs text-ink-gray-6 mt-1': text === 'sm',
56 'text-center text-p-sm text-ink-gray-6 mt-1':
57 text === 'md' || !text,
58 'text-center text-p-base text-ink-gray-6 mt-1': text === 'lg',
59 }"
60 >
61 {{ __(descriptionText) }}
62 </span>
63 </div>
64 </div>
65 </div>
66</template>
67
68<script setup lang="ts">
69import { VNode, computed } from "vue";
70interface Props {
71 title: string;
72 icon?: VNode | string;
73 description?: string;
74 variant?: "default" | "overlay" | "badge";
75 text?: "sm" | "md" | "lg";
76}
77
78const props = withDefaults(defineProps<Props>(), {
79 title: "No Data Found",
80 icon: "",
81 variant: "default",
82 text: "lg",
83});
84
85const descriptionText = computed(() =>
86 props.description !== undefined && props.description !== ""
87 ? props.description
88 : `Create new ${props.title
89 .split(" ")[1]
90 .toLocaleLowerCase()} using the Create button.`
91);
92</script>
93
94<style lang="scss" scoped></style>
95