SegmentedControl

import { useState } from 'react';
import { SegmentedControl } from '@divistant/circca-react';

const deals = [
  { name: 'Lisensi Microsoft 365 — PT Mitra Energi Persada', stage: 'Proposal', nilai: 'Rp 186 jt' },
  { name: 'Implementasi BizOps — CV Sinar Logistik', stage: 'Negosiasi', nilai: 'Rp 420 jt' },
  { name: 'Perpanjangan Fortinet — PT Arunika Data', stage: 'Proposal', nilai: 'Rp 95 jt' },
];
const stages = ['Proposal', 'Negosiasi'];

export default function Example() {
  const [view, setView] = useState('daftar');
  return (
    <div className="grid w-full gap-3">
      <div className="flex items-center justify-between gap-3">
        <span className="type-body-default-semibold text-default">Pipeline deal</span>
        <SegmentedControl aria-label="Tampilan pipeline" value={view} onValueChange={setView}>
          <SegmentedControl.Item value="daftar">Daftar</SegmentedControl.Item>
          <SegmentedControl.Item value="board">Board</SegmentedControl.Item>
        </SegmentedControl>
      </div>
      {view === 'daftar' ? (
        <ul className="divide-y-[0.5px] divide-muted rounded-lg border-[0.5px] border-default bg-default">
          {deals.map(d => (
            <li key={d.name} className="flex items-center gap-3 px-3 py-2 type-callout-default text-default">
              <span className="flex-1 truncate">{d.name}</span>
              <span className="text-muted">{d.stage}</span>
              <span className="w-20 text-right tabular-nums">{d.nilai}</span>
            </li>
          ))}
        </ul>
      ) : (
        <div className="grid grid-cols-2 gap-3">
          {stages.map(s => (
            <div key={s} className="grid content-start gap-2 rounded-lg bg-subtle p-2">
              <span className="type-caption-semibold text-muted">{s}</span>
              {deals
                .filter(d => d.stage === s)
                .map(d => (
                  <div key={d.name} className="grid gap-0.5 rounded-md border-[0.5px] border-default bg-default px-2.5 py-2">
                    <span className="type-callout-default text-default">{d.name}</span>
                    <span className="type-caption-default tabular-nums text-muted">{d.nilai}</span>
                  </div>
                ))}
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

import { SegmentedControl } from '@divistant/circca-react';

const periode = [
  { value: 'minggu', label: 'Minggu' },
  { value: 'bulan', label: 'Bulan' },
  { value: 'kuartal', label: 'Kuartal' },
];

export default function Example() {
  return (
    <div className="grid justify-items-start gap-4">
      {/* Small · trek 24: toolbar padat, kartu grafik */}
      <SegmentedControl size="sm" aria-label="Periode laporan (Small)" defaultValue="bulan" items={periode} />
      {/* Medium · trek 28: bawaan */}
      <SegmentedControl aria-label="Periode laporan (Medium)" defaultValue="bulan" items={periode} />
    </div>
  );
}

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

export default function Example() {
  // Daftar PO customer: pengalih tampilan di toolbar, aksi utama tetap Button.
  // Segmen "Gantt" nonaktif karena PO belum terhubung ke project.
  return (
    <div className="flex w-full flex-wrap items-center gap-3 rounded-lg border-[0.5px] border-default bg-default px-3 py-2">
      <div className="grid">
        <span className="type-body-default-semibold text-default">PO customer</span>
        <span className="type-caption-default text-muted">24 dokumen · Dikstra</span>
      </div>
      <SegmentedControl size="sm" aria-label="Tampilan PO customer" defaultValue="daftar" className="ml-auto">
        <SegmentedControl.Item value="daftar">Daftar</SegmentedControl.Item>
        <SegmentedControl.Item value="kalender">Kalender</SegmentedControl.Item>
        <SegmentedControl.Item value="gantt" disabled>
          Gantt
        </SegmentedControl.Item>
      </SegmentedControl>
      <Button variant="primary" size="sm" leadingVisual={Plus}>
        Buat PO
      </Button>
    </div>
  );
}