feat: add EmptyState component for improved no-data display in supplier payments

2026-10-19 22:35:01 +05:30
parent 7b6c9ac92a
commit 992cd292fa
2 changed files with 74 additions and 22 deletions
@@ -0,0 +1,48 @@
+'use client'
+
+import { HugeiconsIcon } from '@hugeicons/react'
+import { cn } from '@/lib/utils'
+
+type HugeiconDef = React.ComponentProps<typeof HugeiconsIcon>['icon']
+
+interface EmptyStateProps {
+  icon?: HugeiconDef
+  title: string
+  description?: string
+  action?: React.ReactNode
+  className?: string
+}
+
+/**
+ * Centered empty-state for lists and tables. Soft icon in a ringed circle,
+ * tight title and a muted one-liner underneath. Caller can slot an action button.
+ */
+export function EmptyState({ icon, title, description, action, className }: EmptyStateProps) {
+  return (
+    <div className={cn('flex flex-col items-center justify-center gap-3 px-6 py-16 text-center', className)}>
+      {icon && (
+        <div
+          className="relative flex h-14 w-14 items-center justify-center rounded-full
+                     bg-gradient-to-b from-muted/60 to-muted/20
+                     ring-1 ring-border/60
+                     shadow-[inset_0_0_0_1px_rgba(255,255,255,0.03)]"
+        >
+          <div
+            className="absolute inset-0 rounded-full opacity-70 blur-xl"
+            style={{ background: 'radial-gradient(closest-side, rgba(255,255,255,0.06), transparent 70%)' }}
+          />
+          <HugeiconsIcon icon={icon} size={22} className="relative text-muted-foreground/80" />
+        </div>
+      )}
+      <div className="space-y-1">
+        <p className="text-sm font-medium text-foreground">{title}</p>
+        {description && (
+          <p className="text-xs text-muted-foreground max-w-sm mx-auto leading-relaxed">
+            {description}
+          </p>
+        )}
+      </div>
+      {action && <div className="mt-2">{action}</div>}
+    </div>
+  )
+}