CommentBox

import { useState } from 'react';
import { CommentBox, type CommentBoxSubmit, type MentionPerson } from '@divistant/circca-react';

// Ketik "@" untuk menyebut rekan: panah memilih, Return/Tab menyisipkan "@Nama", Esc menutup.
// ⌘ Return (Mac) / Ctrl Enter mengirim; Return biasa membuat baris baru.
const TIM: MentionPerson[] = [
  { value: 'u-dimas', label: 'Dimas Prasetyo', description: 'Project manager' },
  { value: 'u-rina', label: 'Rina Kartika', description: 'Finance' },
  { value: 'u-hendra', label: 'Hendra Wijaya', description: 'Sales manager' },
  { value: 'u-budi', label: 'Budi Santoso', description: 'Konsultan implementasi' },
];

export default function Example() {
  const [terakhir, setTerakhir] = useState<CommentBoxSubmit | null>(null);
  return (
    <div className="grid max-w-xl gap-3">
      <CommentBox author={{ name: 'Anisa Nugraha' }} people={TIM} onAttach={() => {}} onSubmit={setTerakhir} />
      {terakhir && (
        <p className="type-footnote-default text-muted">
          Terkirim: “{terakhir.text}” · sebutan: {terakhir.mentions.length ? terakhir.mentions.join(', ') : 'tidak ada'}
        </p>
      )}
    </div>
  );
}

import { useState } from 'react';
import { Card, CommentBox, Timeline, type MentionPerson } from '@divistant/circca-react';

// Kartu "Aktivitas & komentar" di detail PO-2026-0142 (rujukan: BizOps for IT Services · Detail · PO).
// Komentar terkirim masuk ke Timeline sebagai item Komentar. onSubmit mengembalikan Promise → tombol Kirim
// menampilkan spinner dan kolom dikosongkan setelah berhasil.
const TIM: MentionPerson[] = [
  { value: 'u-dimas', label: 'Dimas Prasetyo', description: 'Project manager' },
  { value: 'u-rina', label: 'Rina Kartika', description: 'Finance' },
  { value: 'u-hendra', label: 'Hendra Wijaya', description: 'Sales manager' },
];

type Komentar = { id: number; text: string; time: Date };

export default function Example() {
  const [komentar, setKomentar] = useState<Komentar[]>([]);
  const kirim = ({ text }: { text: string }) =>
    new Promise<void>(resolve =>
      setTimeout(() => {
        setKomentar(list => [{ id: list.length + 1, text, time: new Date(2026, 9, 8, 10, list.length + 5) }, ...list]);
        resolve();
      }, 600),
    );

  return (
    <Card className="max-w-[560px]" title="Aktivitas & komentar">
      <div className="grid gap-4">
        <CommentBox author={{ name: 'Anisa Nugraha' }} people={TIM} onSubmit={kirim} aria-label="Komentar untuk PO-2026-0142" />
        <Timeline>
          {komentar.map(k => (
            <Timeline.Item key={k.id} type="comment" actor="Anisa Nugraha" action="menambahkan komentar" time={k.time}>
              {k.text}
            </Timeline.Item>
          ))}
          <Timeline.Item type="comment" actor="Rina Kartika" action="menambahkan komentar" time={new Date(2026, 9, 7, 15, 12)}>
            @Anisa Nugraha mohon lampirkan PO customer yang sudah ditandatangani sebelum kita terbitkan PO distributor.
          </Timeline.Item>
          <Timeline.Item type="approved" actor="Hendra Wijaya" action="menyetujui harga khusus" time={new Date(2026, 9, 7, 11, 18)} />
          <Timeline.Item actor="Anisa Nugraha" action="membuat PO-2026-0142" time={new Date(2026, 9, 7, 9, 30)} />
        </Timeline>
      </div>
    </Card>
  );
}

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

// Dokumen terkunci (PO sudah selesai): kolom nonaktif dengan placeholder yang menjelaskan alasannya.
// Tanpa `onAttach`, tombol lampiran tidak tampil.
export default function Example() {
  return (
    <div className="max-w-xl">
      <CommentBox author={{ name: 'Anisa Nugraha' }} disabled placeholder="PO-2026-0098 sudah selesai — komentar ditutup" />
    </div>
  );
}