EmptyState

import { EmptyState, Button, Icon } from "@nili/ui"
import { RiInboxLine, RiAddLine } from "@remixicon/react"

export function Example() {
  return (
    <EmptyState
      illustration={<Icon icon={RiInboxLine} />}
      title={t('copy.noInvoices')}
      description={t('copy.noInvoicesBody')}
      actions={<Button startIcon={<Icon icon={RiAddLine} />}>New invoice</Button>}
    />
  )
}

import { EmptyState } from "@nili/ui"

export function Example() {
  return (
    <>
      <EmptyState size="sm" title={t('copy.noResults')} />
      <EmptyState size="md" title="No results" />
      <EmptyState size="lg" title="No results" />
    </>
  )
}

import { EmptyState, Button, LinkButton, Icon } from "@nili/ui"
import { RiInboxLine, RiSearchLine, RiWifiOffLine } from "@remixicon/react"

export function Example() {
  return (
    <>
      {/* nothing created yet → offer to create */}
      <EmptyState
        illustration={<Icon icon={RiInboxLine} />}
        title={t('copy.noProjects')}
        description={t('copy.noProjectsBody')}
        actions={<Button>New project</Button>}
      />

      {/* nothing matched → offer to clear the filter */}
      <EmptyState
        illustration={<Icon icon={RiSearchLine} />}
        title="No projects match “roadmap”"
        description={t('copy.noMatchesBody')}
        actions={<Button appearance="stroke">Clear filters</Button>}
      />

      {/* something failed → offer to retry */}
      <EmptyState
        illustration={<Icon icon={RiWifiOffLine} />}
        title={t('copy.loadFailed')}
        description={t('copy.loadFailedBody')}
        actions={
          <>
            <Button appearance="stroke">Retry</Button>
            <LinkButton href="#">Contact support</LinkButton>
          </>
        }
      />
    </>
  )
}