AppHeader

import { useState } from 'react';
import { AppHeader, CompanySwitcher, ToastProvider, useToast, type CompanyOption } from '@divistant/circca-react';

const companies: CompanyOption[] = [
  { value: 'dikstra', name: 'PT Dikstra Cipta Solusi', description: 'Jasa IT & lisensi software' },
  { value: 'divistant', name: 'PT Divistant Teknologi Indonesia', description: 'Grup DnD' },
];

// Header BizOps for IT Services — Figma Template · Daftar (29:982): pengalih perusahaan, pencarian global ⌘K / Ctrl K,
// notifikasi, dan menu pengguna. Tekan ⌘K / Ctrl K di halaman ini untuk memfokuskan pencarian.
function Header() {
  const toast = useToast();
  const [company, setCompany] = useState('dikstra');
  const [q, setQ] = useState('');
  return (
    <div className="rounded-xl border-[0.5px] border-muted bg-canvas">
      <AppHeader
        landmark={false}
        companySwitcher={
          <CompanySwitcher
            options={companies}
            value={company}
            announce={false}
            onValueChange={(value, option) => {
              setCompany(value);
              toast({ message: `Beralih ke ${option.name}` });
            }}
          />
        }
        // shortcut: false hanya di docs — ⌘K di halaman ini milik pencarian situs. Di aplikasi biarkan bawaan (true).
        search={{ 'aria-label': 'Pencarian global', placeholder: 'Cari dokumen, customer, distributor…', value: q, onValueChange: setQ, shortcut: false }}
        notifications={<AppHeader.Notifications unread={3} />}
        user={<AppHeader.User name="Anisa Nugraha" aria-haspopup="menu" />}
      />
    </div>
  );
}

export default function Example() {
  return (
    <ToastProvider>
      <Header />
    </ToastProvider>
  );
}

import { useState } from 'react';
import { AppHeader, Button, IconButton, Popover } from '@divistant/circca-react';
import { Question } from '@phosphor-icons/react';

// Penanda belum dibaca: titik (bawaan Figma) atau Badge berangka. Jumlah selalu masuk ke label tombol:
// "Notifikasi, 3 belum dibaca". Tombol bisa langsung menjadi pemicu Popover panel notifikasi.
// landmark={false} karena contoh ini disarangkan di halaman dokumentasi yang sudah punya banner.
export default function Example() {
  const [unread, setUnread] = useState(3);
  return (
    <div className="grid gap-3">
      <div className="rounded-xl border-[0.5px] border-muted bg-canvas">
        <AppHeader
          landmark={false}
          actions={<IconButton variant="ghost" icon={Question} label="Bantuan" tooltipSide="bottom" />}
          notifications={
            <Popover
              title="Notifikasi"
              trigger={<AppHeader.Notifications unread={unread} />}
              align="end"
              footer={
                <Button size="sm" onClick={() => setUnread(0)}>
                  Tandai semua dibaca
                </Button>
              }
            >
              {unread > 0 ? `${unread} persetujuan PO menunggu Anda.` : 'Tidak ada notifikasi baru.'}
            </Popover>
          }
          user={<AppHeader.User name="Anisa Nugraha" />}
        />
      </div>
      <div className="rounded-xl border-[0.5px] border-muted bg-canvas">
        <AppHeader
          landmark={false}
          notifications={<AppHeader.Notifications unread={12} indicator="count" />}
          user={<AppHeader.User name="Rina Kartika" />}
        />
      </div>
    </div>
  );
}