src/components/common/EmptyPlaceholder.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

import { Column, Icon, Text } from '@umami/react-zen';
import type { ReactNode } from 'react';

export interface EmptyPlaceholderProps {
  title?: string;
  description?: string;
  icon?: ReactNode;
  children?: ReactNode;
}

export function EmptyPlaceholder({ title, description, icon, children }: EmptyPlaceholderProps) {
  return (
    <Column alignItems="center" justifyContent="center" gap="5" height="100%" width="100%">
      {icon && (
        <Icon color="10" size="xl">
          {icon}
        </Icon>
      )}
      {title && (
        <Text weight="bold" size="4">
          {title}
        </Text>
      )}
      {description && <Text color="muted">{description}</Text>}
      {children}
    </Column>
  );
}