Token

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

export default function Example() {
  const [tags, setTags] = useState(['Lisensi', 'Microsoft 365', 'Perpanjangan']);
  return (
    <div className="grid gap-4">
      <div className="flex flex-wrap items-center gap-2">
        <Token size="sm" avatar>Anisa Nugraha</Token>
        <Token size="sm" avatar onRemove={() => {}}>Dimas Prasetyo</Token>
        <Token avatar onRemove={() => {}}>Rina Kartika</Token>
        <Token>Fortinet</Token>
      </div>
      <div className="flex flex-wrap items-center gap-1">
        {tags.map(t => (
          <Token key={t} onRemove={() => setTags(x => x.filter(y => y !== t))}>
            {t}
          </Token>
        ))}
        {tags.length === 0 && <span className="type-callout-default text-muted">Semua tag dihapus.</span>}
      </div>
    </div>
  );
}

import { useState } from 'react';
import { Button, Token } from '@divistant/circca-react';

const AWAL = [
  { key: 'status', label: 'Status: Menunggu persetujuan' },
  { key: 'customer', label: 'Customer: PT Arunika Data' },
  { key: 'pemilik', label: 'Pemilik: Anisa Nugraha' },
];

export default function Example() {
  const [filters, setFilters] = useState(AWAL);
  return (
    <div className="grid gap-2">
      <div className="flex flex-wrap items-center gap-1" role="group" aria-label="Filter aktif">
        {filters.map(f => (
          <Token key={f.key} size="sm" onRemove={() => setFilters(x => x.filter(y => y.key !== f.key))}>
            {f.label}
          </Token>
        ))}
        {filters.length > 0 ? (
          <Button size="sm" variant="ghost" onClick={() => setFilters([])}>
            Hapus semua
          </Button>
        ) : (
          <Button size="sm" variant="ghost" onClick={() => setFilters(AWAL)}>
            Kembalikan contoh
          </Button>
        )}
      </div>
      <p className="type-footnote-default text-muted">{filters.length} filter aktif · 14 PO customer</p>
    </div>
  );
}