Empty

import { IconBook, IconRoute } from "@tabler/icons-react";
import { Button } from "@/components/ui/button";
import {
  Empty,
  EmptyContent,
  EmptyDescription,
  EmptyHeader,
  EmptyMedia,
  EmptyTitle,
} from "@/components/ui/empty";

export default function Particle() {
  return (
    <Empty>
      <EmptyHeader>
        <EmptyMedia variant="icon">
          <IconRoute stroke={1.5} />
        </EmptyMedia>
        <EmptyTitle>Нет предстоящих встреч</EmptyTitle>
        <EmptyDescription>
          Создайте встречу, чтобы начать работу.
        </EmptyDescription>
      </EmptyHeader>
      <EmptyContent>
        <div className="flex gap-2">
          <Button size="sm">Создать встречу</Button>
          <Button size="sm" variant="outline">
            <IconBook stroke={1.5} />
            Документация
          </Button>
        </div>
      </EmptyContent>
    </Empty>
  );
}

Установка

bunnpmpnpmyarn
pnpm dlx shadcn@latest add @oracul/empty
Копировать

Использование

Copyimport {
  Empty,
  EmptyContent,
  EmptyDescription,
  EmptyHeader,
  EmptyMedia,
  EmptyTitle,
} from "@/components/ui/empty"

Copy<Empty>
  <EmptyHeader>
    <EmptyMedia variant="icon">
      <Icon />
    </EmptyMedia>
    <EmptyTitle>No data</EmptyTitle>
    <EmptyDescription>No data found</EmptyDescription>
  </EmptyHeader>
  <EmptyContent>
    <Button>Add data</Button>
  </EmptyContent>
</Empty>

API

Дизайн API этого компонента смоделирован по образцу компонента empty из shadcn/ui, чтобы обеспечить привычность и согласованность для разработчиков, уже использующих shadcn. Такая стандартизация упрощает переход на Oracul DS, сохраняя совместимость API с паттернами, которые разработчики уже знают и любят.

Empty

Основной компонент пустого состояния. Оборачивает компоненты EmptyHeader и EmptyContent.

Copy<Empty>
  <EmptyHeader />
  <EmptyContent />
</Empty>

EmptyHeader

Компонент EmptyHeader оборачивает медиа, заголовок и описание пустого состояния.

Copy<EmptyHeader>
  <EmptyMedia />
  <EmptyTitle />
  <EmptyDescription />
</EmptyHeader>

EmptyMedia

Используйте компонент EmptyMedia для отображения медиа пустого состояния, например иконки или изображения. Его также можно использовать для отображения других компонентов, таких как аватар.

Copy<EmptyMedia variant="icon">
  <Icon />
</EmptyMedia>

Copy<EmptyMedia>
  <Avatar>
    <AvatarImage src="..." />
    <AvatarFallback>JD</AvatarFallback>
  </Avatar>
</EmptyMedia>

EmptyTitle

Используйте компонент EmptyTitle для отображения заголовка пустого состояния.

Copy<EmptyTitle>No data</EmptyTitle>

EmptyDescription

Используйте компонент EmptyDescription для отображения описания пустого состояния.

Copy<EmptyDescription>You do not have any notifications.</EmptyDescription>

EmptyContent

Используйте компонент EmptyContent для отображения содержимого пустого состояния, например кнопки, поля ввода или ссылки.

Copy<EmptyContent>
  <Button>Add Project</Button>
</EmptyContent>