From fc3f939f6658e81126d5e5b6abf21c2943c6b5f2 Mon Sep 17 00:00:00 2001
From: Yoga Pangestu <ypangestu976@gmail.com>
Date: Fri, 24 Jul 2026 09:56:08 +0700
Subject: [PATCH] feat: add empty state UI components for enhanced user
 experience

- Introduced multiple components: Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, and EmptyTitle.
- Each component is designed to provide a consistent empty state layout with customizable class props.
- Utilized utility functions for class management to ensure styling flexibility.
---
 app/components/ui/empty/Empty.vue            | 20 +++++++++++++++++++
 app/components/ui/empty/EmptyContent.vue     | 20 +++++++++++++++++++
 app/components/ui/empty/EmptyDescription.vue | 20 +++++++++++++++++++
 app/components/ui/empty/EmptyHeader.vue      | 20 +++++++++++++++++++
 app/components/ui/empty/EmptyMedia.vue       | 21 ++++++++++++++++++++
 app/components/ui/empty/EmptyTitle.vue       | 17 ++++++++++++++++
 6 files changed, 118 insertions(+)
 create mode 100644 app/components/ui/empty/Empty.vue
 create mode 100644 app/components/ui/empty/EmptyContent.vue
 create mode 100644 app/components/ui/empty/EmptyDescription.vue
 create mode 100644 app/components/ui/empty/EmptyHeader.vue
 create mode 100644 app/components/ui/empty/EmptyMedia.vue
 create mode 100644 app/components/ui/empty/EmptyTitle.vue

diff --git a/app/components/ui/empty/Empty.vue b/app/components/ui/empty/Empty.vue
new file mode 100644
index 0000000..2637b3c
--- /dev/null
+++ b/app/components/ui/empty/Empty.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="empty"
+    :class="cn(
+      'flex min-w-0 flex-1 flex-col items-center justify-center gap-6 text-balance rounded-lg border-dashed p-6 text-center md:p-12',
+      props.class,
+    )"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/app/components/ui/empty/EmptyContent.vue b/app/components/ui/empty/EmptyContent.vue
new file mode 100644
index 0000000..d19ee00
--- /dev/null
+++ b/app/components/ui/empty/EmptyContent.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="empty-content"
+    :class="cn(
+      'flex w-full min-w-0 max-w-sm flex-col items-center gap-4 text-balance text-sm',
+      props.class,
+    )"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/app/components/ui/empty/EmptyDescription.vue b/app/components/ui/empty/EmptyDescription.vue
new file mode 100644
index 0000000..e4ed5fb
--- /dev/null
+++ b/app/components/ui/empty/EmptyDescription.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <p
+    data-slot="empty-description"
+    :class="cn(
+      'text-muted-foreground [&>a:hover]:text-primary text-sm/relaxed [&>a]:underline [&>a]:underline-offset-4',
+      $attrs.class ?? '',
+    )"
+  >
+    <slot />
+  </p>
+</template>
diff --git a/app/components/ui/empty/EmptyHeader.vue b/app/components/ui/empty/EmptyHeader.vue
new file mode 100644
index 0000000..ac21d8c
--- /dev/null
+++ b/app/components/ui/empty/EmptyHeader.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="empty-header"
+    :class="cn(
+      'flex max-w-sm flex-col items-center gap-2 text-center',
+      props.class,
+    )"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/app/components/ui/empty/EmptyMedia.vue b/app/components/ui/empty/EmptyMedia.vue
new file mode 100644
index 0000000..c68397c
--- /dev/null
+++ b/app/components/ui/empty/EmptyMedia.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import type { EmptyMediaVariants } from "."
+import { cn } from "@/lib/utils"
+import { emptyMediaVariants } from "."
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+  variant?: EmptyMediaVariants["variant"]
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="empty-icon"
+    :data-variant="variant"
+    :class="cn(emptyMediaVariants({ variant }), props.class)"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/app/components/ui/empty/EmptyTitle.vue b/app/components/ui/empty/EmptyTitle.vue
new file mode 100644
index 0000000..90c950d
--- /dev/null
+++ b/app/components/ui/empty/EmptyTitle.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="empty-title"
+    :class="cn('text-lg font-medium tracking-tight', props.class)"
+  >
+    <slot />
+  </div>
+</template>