Empty

import {
  Empty,
  EmptyContent,
  EmptyDescription,
  EmptyHeader,
  EmptyMedia,
  EmptyTitle,
} from '@/components/ui/empty'
import { Button } from '@/components/ui/button'
import { PackageOpenIcon } from 'lucide-react'

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21<Empty className="border border-dashed border-border">
  <EmptyHeader>
    <EmptyMedia variant="icon">
      <PackageOpenIcon aria-hidden />
    </EmptyMedia>
    <EmptyTitle>Nenhum item no catálogo ainda</EmptyTitle>
    <EmptyDescription>
      Crie um item interno ou ingira um externo. Nos dois casos ele nasce{' '}
      <code className="font-mono type-caption">incoming</code> e passa pela
      normalização antes de ser distribuído.
    </EmptyDescription>
  </EmptyHeader>
  <EmptyContent>
    <div className="flex flex-wrap justify-center gap-2">
      <Button size="sm">Criar item</Button>
      <Button size="sm" variant="outline">
        Ingerir externo
      </Button>
    </div>
  </EmptyContent>
</Empty>