Empty State

1/* eslint-disable react-refresh/only-export-components */
2import * as React from 'react'
3import { cva, type VariantProps } from 'class-variance-authority'
4import { cn } from '@/lib/utils'
5import {
6  FileQuestion,
7  Search,
8  Inbox,
9  FolderOpen,
10  Users,
11  ShoppingCart,
12  Bell,
13  Image,
14  AlertTriangle,
15  WifiOff,
16  ShieldX,
17  Clock,
18  Wrench,
19  Upload,
20} from 'lucide-react'
21 
22// ============================================================================
23// Empty State Root
24// ============================================================================
25 
26const emptyStateVariants = cva(
27  'flex items-center justify-center',
28  {
29    variants: {
30      variant: {
31        default: '',
32        filled: 'bg-muted/30 border-3 border-dashed border-foreground p-8',
33        card: 'bg-card border-3 border-foreground shadow-[4px_4px_0px_hsl(var(--shadow-color))] p-8',
34      },
35      size: {
36        compact: 'gap-2 p-2',
37        sm: 'gap-3 p-4',
38        md: 'gap-4 p-6',
39        lg: 'gap-6 p-8',
40      },
41      layout: {
42        vertical: 'flex-col text-center',
43        horizontal: 'flex-row text-left',
44      },
45      animation: {
46        none: '',
47        fadeIn: 'animate-[fadeIn_0.3s_ease-out]',
48        bounce: 'animate-[bounceIn_0.5s_ease-out]',
49        scale: 'animate-[scaleIn_0.3s_ease-out]',
50      },
51    },
52    defaultVariants: {
53      variant: 'default',
54      size: 'md',
55      layout: 'vertical',
56      animation: 'none',
57    },
58  }
59)
60 
61export interface EmptyStateProps
62  extends React.HTMLAttributes<HTMLDivElement>,
63    VariantProps<typeof emptyStateVariants> {}
64 
65const EmptyState = React.forwardRef<HTMLDivElement, EmptyStateProps>(
66  ({ className, variant, size, layout, animation, children, ...props }, ref) => {
67    return (
68      <div
69        ref={ref}
70        className={cn(emptyStateVariants({ variant, size, layout, animation }), className)}
71        {...props}
72      >
73        {children}
74      </div>
75    )
76  }
77)
78EmptyState.displayName = 'EmptyState'
79 
80// ============================================================================
81// Empty State Icon
82// ============================================================================
83 
84const iconContainerVariants = cva(
85  'flex items-center justify-center border-3 border-foreground shadow-[3px_3px_0px_hsl(var(--shadow-color))]',
86  {
87    variants: {
88      size: {
89        xs: 'w-10 h-10',
90        sm: 'w-12 h-12',
91        md: 'w-16 h-16',
92        lg: 'w-20 h-20',
93        xl: 'w-24 h-24',
94      },
95      iconColor: {
96// … truncated