Filter Chip

import React, { useState } from 'react';

export const FilterChip: React.FC = () => {
  const [filters, setFilters] = useState<string[]>(['javascript']);
  const options = ['javascript', 'typescript', 'react'];

  const toggleFilter = (filter: string) => {
    setFilters(prev =>
      prev.includes(filter)
        ? prev.filter(f => f !== filter)
        : [...prev, filter]
    );
  };

  return (
    <div className="chip-demo-container">
      {options.map((filter) => (
        <button
          key={filter}
          className={`filter-chip ${filters.includes(filter) ? 'filter-chip-active' : ''}`}
          onClick={() => toggleFilter(filter)}
        >
          {filters.includes(filter) && <span>✓</span>}
          {filter}
        </button>
      ))}
    </div>
  );
};

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: 2px solid var(--border-color);
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.filter-chip-active {
  background: var(--accent-purple);
  color: white;
}