Empty

import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from '@hanzo/ui'

export function Default() {
  return (
    <Empty>
      <EmptyHeader>
        <EmptyMedia variant="icon">＋</EmptyMedia>
        <EmptyTitle>No data</EmptyTitle>
        <EmptyDescription>No data found. Add one to get started.</EmptyDescription>
      </EmptyHeader>
      <EmptyContent>
        <Button>Add data</Button>
      </EmptyContent>
    </Empty>
  )
}

export function PlainMedia() {
  return (
    <Empty>
      <EmptyHeader>
        <EmptyMedia>🗂️</EmptyMedia>
        <EmptyTitle>No projects</EmptyTitle>
        <EmptyDescription>You have not created any projects yet.</EmptyDescription>
      </EmptyHeader>
    </Empty>
  )
}

export function WithActions() {
  return (
    <Empty>
      <EmptyHeader>
        <EmptyMedia variant="icon">⚠</EmptyMedia>
        <EmptyTitle>Something went wrong</EmptyTitle>
        <EmptyDescription>We could not load your notifications.</EmptyDescription>
      </EmptyHeader>
      <EmptyContent>
        <YStack gap="$2" width="100%">
          <Button>Retry</Button>
          <Button variant="outline">Go back</Button>
        </YStack>
      </EmptyContent>
    </Empty>
  )
}

Types

export type EmptyMediaVariant = 'default' | 'icon'

export type EmptyProps = ComponentProps<typeof EmptyFrame>

export type EmptyHeaderProps = ComponentProps<typeof HeaderFrame>

export type EmptyMediaProps = ComponentProps<typeof MediaFrame> & { variant?: EmptyMediaVariant }

export type EmptyTitleProps = ComponentProps<typeof TitleFrame>

export type EmptyDescriptionProps = ComponentProps<typeof DescriptionFrame>

export type EmptyContentProps = ComponentProps<typeof ContentFrame>

Exports