useSet

import { useSet } from '@kivora/react';

function TagSelector() {
  const [tags, { add, remove, toggle }] = useSet(['react', 'typescript']);

  return (
    <div>
      <div>
        Selected: {Array.from(tags).join(', ')}
      </div>
      {['react', 'typescript', 'node', 'python'].map((tag) => (
        <button
          key={tag}
          onClick={() => toggle(tag)}
          style={{
            fontWeight: tags.has(tag) ? 'bold' : 'normal'
          }}
        >
          {tag}
        </button>
      ))}
    </div>
  );
}

const items = ['Apple', 'Banana', 'Orange', 'Grape'];
const [selected, { toggle }] = useSet<string>();

return (
  <div>
    {items.map((item) => (
      <label key={item}>
        <input
          type="checkbox"
          checked={selected.has(item)}
          onChange={() => toggle(item)}
        />
        {item}
      </label>
    ))}
    <p>Selected: {selected.size} items</p>
  </div>
);

const [activeFilters, { add, remove, clear }] = useSet(['inStock']);

const filteredProducts = products.filter((product) => {
  if (activeFilters.has('inStock') && !product.inStock) return false;
  if (activeFilters.has('onSale') && !product.onSale) return false;
  return true;
});

return (
  <div>
    <button onClick={() => add('inStock')}>In Stock Only</button>
    <button onClick={() => add('onSale')}>On Sale</button>
    <button onClick={clear}>Clear Filters</button>
  </div>
);

const [expandedSections, { toggle }] = useSet<string>();

const sections = ['general', 'privacy', 'notifications'];

return (
  <div>
    {sections.map((section) => (
      <div key={section}>
        <button onClick={() => toggle(section)}>
          {expandedSections.has(section) ? '▼' : '▶'} {section}
        </button>
        {expandedSections.has(section) && (
          <div>Section content...</div>
        )}
      </div>
    ))}
  </div>
);

const [visitedPages, { add }] = useSet<string>();

useEffect(() => {
  add(currentPageId);
}, [currentPageId, add]);

return (
  <div>
    You've visited {visitedPages.size} unique pages
  </div>
);

const [selected, { toggle, reset, clear }] = useSet([1, 2, 3]);

return (
  <div>
    {items.map((item) => (
      <div
        key={item.id}
        onClick={() => toggle(item.id)}
        style={{
          background: selected.has(item.id) ? 'blue' : 'white'
        }}
      >
        {item.name}
      </div>
    ))}
    <button onClick={reset}>Reset to Default</button>
    <button onClick={clear}>Clear All</button>
  </div>
);