Empty State

'use client';
 
import { FileX, Inbox, Search } from 'lucide-react';
import { Box, Button, Column, Icon, Row, Text } from '@umami/react-zen';
 
export function EmptyState({
  icon,
  title,
  description,
  action,
  secondaryAction,
  ...props
}) {
  return (
    <Column alignItems="center" justifyContent="center" padding="8" gap="4" {...props}>
      {icon && (
        <Row
          width="16"
          height="16"
          borderRadius="full"
          backgroundColor="surface-raised"
          alignItems="center"
          justifyContent="center"
        >
          <Icon size="lg" color="muted">{icon}</Icon>
        </Row>
      )}
      <Column alignItems="center" gap="2">
        <Text size="lg" weight="semibold">{title}</Text>
        {description && (
          <Box maxWidth="20rem" textAlign="center">
            <Text color="muted">{description}</Text>
          </Box>
        )}
      </Column>
      {(action || secondaryAction) && (
        <Column gap="2" alignItems="center">
          {action && <Button variant="primary" onPress={action.onClick}>{action.label}</Button>}
          {secondaryAction && <Button variant="quiet" onPress={secondaryAction.onClick}>{secondaryAction.label}</Button>}
        </Column>
      )}
    </Column>
  );
}
 
export function EmptyStateNoResults(props) {
  return (
    <EmptyState
      icon={<Search />}
      title="No results found"
      description="Try adjusting your search or filter to find what you're looking for."
      {...props}
    />
  );
}
 
export function EmptyStateNoData(props) {
  return (
    <EmptyState
      icon={<Inbox />}
      title="No data yet"
      description="Get started by creating your first item."
      {...props}
    />
  );
}
 
export function EmptyStateError(props) {
  return (
    <EmptyState
      icon={<FileX />}
      title="Something went wrong"
      description="We couldn't load this content. Please try again."
      action={{ label: 'Try again', onClick: () => window.location.reload() }}
      {...props}
    />
  );
}