EmptyState

import { Button, EmptyState } from '@divistant/circca-react';
import { Plus, Tray, UploadSimple } from '@phosphor-icons/react';

// Belum ada data: jelaskan apa yang akan muncul di sini dan beri jalan untuk membuat yang pertama.
export default function Example() {
  return (
    <EmptyState
      icon={Tray}
      title="Belum ada PO customer"
      description="PO customer yang diterima dari sales akan muncul di sini. Buat baru atau impor dari file Excel."
      actions={
        <>
          <Button leadingVisual={UploadSimple}>Impor</Button>
          <Button variant="primary" leadingVisual={Plus}>
            Buat PO
          </Button>
        </>
      }
    />
  );
}

import { Button, EmptyState } from '@divistant/circca-react';
import { MagnifyingGlass } from '@phosphor-icons/react';

// Tanpa hasil: sebut kata kunci yang dicari dan beri cara keluar (hapus filter), bukan tombol "Buat".
export default function Example() {
  return (
    <EmptyState
      icon={MagnifyingGlass}
      title="Tidak ada hasil untuk ‘Graha’"
      description="Coba kata kunci lain atau hapus filter Status: Draft dan Periode: Okt 2026."
      actions={<Button>Hapus filter</Button>}
    />
  );
}

import { Button, EmptyState } from '@divistant/circca-react';
import { LockSimple } from '@phosphor-icons/react';

// Tanpa izin: jelaskan siapa yang bisa memberi akses; jangan tampilkan tombol yang pasti gagal.
export default function Example() {
  return (
    <EmptyState
      icon={LockSimple}
      title="Anda tidak punya akses ke Piutang"
      description="Modul ini hanya untuk tim Finance. Minta akses ke Rina Kartika (Finance) bila Anda perlu melihat tagihan proyek."
      actions={<Button>Minta akses</Button>}
    />
  );
}

import { EmptyState } from '@divistant/circca-react';
import { ChatCircle } from '@phosphor-icons/react';

// Compact (lebar 320, ikon 32) untuk panel, kartu, dan inspector yang sempit.
export default function Example() {
  return (
    <div className="w-full max-w-sm rounded-xl border border-default bg-default">
      <EmptyState
        size="compact"
        icon={ChatCircle}
        title="Belum ada komentar"
        description="Mention @Dimas Prasetyo (PM) untuk meminta tinjauan PO-2026-0142."
      />
    </div>
  );
}