Meda Empty State

1import type { LucideIcon } from 'lucide-react'
2import { type ComponentPropsWithoutRef, isValidElement, type ReactNode } from 'react'
3import { cn } from '@/lib/utils'
4 
5export type EmptyStateVariant = 'default' | 'panel' | 'inline'
6 
7export interface EmptyStateProps extends Omit<ComponentPropsWithoutRef<'div'>, 'title'> {
8  icon?: LucideIcon | ReactNode
9  title: ReactNode
10  description?: ReactNode
11  action?: ReactNode
12  variant?: EmptyStateVariant
13}
14 
15function isIconComponent(icon: NonNullable<EmptyStateProps['icon']>): icon is LucideIcon {
16  if (typeof icon === 'function') return true
17  if (typeof icon !== 'object') return false
18  return '$$typeof' in icon && !isValidElement(icon)
19}
20 
21function renderIcon(icon: EmptyStateProps['icon']) {
22  if (!icon) return null
23  if (isIconComponent(icon)) {
24    const Icon = icon
25    return <Icon data-testid="empty-state-icon" className="size-10" aria-hidden="true" />
26  }
27  return (
28    <span data-testid="empty-state-icon" aria-hidden="true" className="inline-flex">
29      {icon}
30    </span>
31  )
32}
33 
34export function EmptyState({ icon, title, description, action, variant = 'default', className, ...props }: EmptyStateProps) {
35  return (
36    <div
37      data-slot="empty-state"
38      data-variant={variant}
39      className={cn(
40        'flex flex-col items-center justify-center text-center',
41        variant === 'default' && 'px-6 py-16',
42        variant === 'panel' && 'px-4 py-10',
43        variant === 'inline' && 'px-3 py-6',
44        className
45      )}
46      {...props}
47    >
48      {icon ? (
49        <div
50          data-slot="empty-state-icon"
51          className={cn(
52            'mb-4 inline-flex items-center justify-center rounded-md text-muted-foreground',
53            variant === 'inline' ? 'size-9' : 'size-12'
54          )}
55        >
56          {renderIcon(icon)}
57        </div>
58      ) : null}
59      <h3
60        data-slot="empty-state-title"
61        className={cn(
62          'font-semibold text-foreground',
63          variant === 'default' && 'text-lg',
64          variant === 'panel' && 'text-base',
65          variant === 'inline' && 'text-sm'
66        )}
67      >
68        {title}
69      </h3>
70      {description ? (
71        <p
72          data-slot="empty-state-description"
73          className={cn('mt-1 max-w-sm text-muted-foreground', variant === 'inline' ? 'text-xs' : 'text-sm')}
74        >
75          {description}
76        </p>
77      ) : null}
78      {action ? <div data-slot="empty-state-action" className="mt-5">{action}</div> : null}
79    </div>
80// … truncated