Chips

import { Chips } from '@gympass/yoga';

render(() => {
  const [first, toggleFirst] = useState(false);
  const [second, toggleSecond] = useState(false);
  const onToggleFirst = () => toggleFirst(!first);
  const onToggleSecond = () => toggleSecond(!second);

  return (
    <>
      <Chips selected={first} onToggle={onToggleFirst}>
        Classes
      </Chips>
      <Chips selected={second} onToggle={onToggleSecond}>
        Gyms and studios
      </Chips>
    </>
  );
});
render(() => {
  const [first, toggleFirst] = useState(false);
  const [second, toggleSecond] = useState(false);
  const onToggleFirst = () => toggleFirst(!first);
  const onToggleSecond = () => toggleSecond(!second);

  return (
    <>
      <Chips selected={first} onToggle={onToggleFirst}>
        Classes
      </Chips>
      <Chips selected={second} onToggle={onToggleSecond}>
        Gyms and studios
      </Chips>
    </>
  );
});

import { Chips } from '@gympass/yoga';

render(() => {
  const [first, toggleFirst] = useState(true);
  const [second, toggleSecond] = useState(false);
  const [third, toggleThird] = useState(false);
  const onToggleFirst = () => toggleFirst(!first);
  const onToggleSecond = () => toggleSecond(!second);
  const onToggleThird = () => toggleThird(!third);

  return (
    <>
      <Chips selected={first} onToggle={onToggleFirst} icons={[, Time]}>
        Open now
      </Chips>
      <Chips selected={second} onToggle={onToggleSecond} icons={[ChevronDown]}>
        Activities
      </Chips>
      <Chips
        selected={third}
        onToggle={onToggleThird}
        icons={[ChevronDown, MapPin]}
      >
        Location
      </Chips>
    </>
  );
});
render(() => {
  const [first, toggleFirst] = useState(true);
  const [second, toggleSecond] = useState(false);
  const [third, toggleThird] = useState(false);
  const onToggleFirst = () => toggleFirst(!first);
  const onToggleSecond = () => toggleSecond(!second);
  const onToggleThird = () => toggleThird(!third);

  return (
    <>
      <Chips selected={first} onToggle={onToggleFirst} icons={[, Time]}>
        Open now
      </Chips>
      <Chips selected={second} onToggle={onToggleSecond} icons={[ChevronDown]}>
        Activities
      </Chips>
      <Chips
        selected={third}
        onToggle={onToggleThird}
        icons={[ChevronDown, MapPin]}
      >
        Location
      </Chips>
    </>
  );
});