Chip

Chip.tsx

import { useState } from 'react';

type ChipProps = {
  text: string;
  onClick?: () => void;
};

const Chip = ({ text, onClick }: ChipProps) => {
  const [selected, setSelected] = useState(false);

  const handleClick = () => {
    setSelected(!selected);
    if (onClick) onClick();
  };

  return (
    <div
      className={`chip ${selected ? 'selected' : ''}`}
      onClick={handleClick}
    >
      {text}
    </div>
  );
};

export default Chip;

Chip.module.css

.chip {
  display: inline-flex;
  align-items: center;
  border-radius: 16px;
  padding: 8px;
  font-size: 14px;
  font-weight: 500;
  margin: 4px;
}

.chip-text {
  margin-right: 8px;
}

.chip-delete {
  background-color: transparent;
  border: none;
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 500;
  margin-left: 8px;
  cursor: pointer;
}