Chip

function Example() {
  const [amount, setAmount] = useState(1000);
  const [period, setPeriod] = useState('week');
  return (
    <div className="flex flex-col gap-4">
      <div className="flex flex-wrap gap-2">
        {[500, 1000, 5000].map((value) => (
          <Chip
            key={value}
            variant="solid"
            selected={amount === value}
            onClick={() => setAmount(value)}
            className="px-4 text-14-medium"
          >
            {value} ₽
          </Chip>
        ))}
      </div>
      <div className="flex flex-wrap gap-2">
        <Chip>Почему просела органика?</Chip>
        <Chip>Где теряются заявки?</Chip>
        <Chip size="sm" selected>
          доставка
        </Chip>
      </div>
      <div className="flex flex-wrap gap-2">
        {['day', 'week', 'month'].map((value) => (
          <Chip
            key={value}
            variant="filter"
            size="lg"
            selected={period === value}
            onClick={() => setPeriod(value)}
          >
            {value}
          </Chip>
        ))}
      </div>
    </div>
  );
}

render(<Example />);