List

import { Box, List, Checkbox, Text } from '@gympass/yoga';

const SwitchLine = props => (
  <Box
    display="flex"
    justifyContent="space-between"
    {...props}
  />
);

render(() => {
  const [locker, toggleLocker] = useState(false);
  const [wifi, toggleWifi] = useState(false);
  const [parking, toggleParking] = useState(false);

  return (
    <List>
      <List.Item>
        <SwitchLine>
          <span>Locker</span>
          <Checkbox.Switch
            checked={locker}
            onChange={() => toggleLocker(!locker)}
          />
        </SwitchLine>
      </List.Item>

      <List.Item>
        <SwitchLine>
          <span>Wi-fi</span>
          <Checkbox.Switch checked={wifi} onChange={() => toggleWifi(!wifi)} />
        </SwitchLine>
      </List.Item>

      <List.Item>
        <SwitchLine>
          <span>Parking</span>
          <Checkbox.Switch
            checked={parking}
            onChange={() => toggleParking(!parking)}
          />
        </SwitchLine>
      </List.Item>

      <List.LinkItem
        href="https://www.gympass.com/"
        target="_blank"
      >
        <Text>Link</Text>
      </List.LinkItem>
    </List>
  );
});
const SwitchLine = props => (
  <Box
    display="flex"
    justifyContent="space-between"
    {...props}
  />
);

render(() => {
  const [locker, toggleLocker] = useState(false);
  const [wifi, toggleWifi] = useState(false);
  const [parking, toggleParking] = useState(false);

  return (
    <List>
      <List.Item>
        <SwitchLine>
          <span>Locker</span>
          <Checkbox.Switch
            checked={locker}
            onChange={() => toggleLocker(!locker)}
          />
        </SwitchLine>
      </List.Item>

      <List.Item>
        <SwitchLine>
          <span>Wi-fi</span>
          <Checkbox.Switch checked={wifi} onChange={() => toggleWifi(!wifi)} />
        </SwitchLine>
      </List.Item>

      <List.Item>
        <SwitchLine>
          <span>Parking</span>
          <Checkbox.Switch
            checked={parking}
            onChange={() => toggleParking(!parking)}
          />
        </SwitchLine>
      </List.Item>

      <List.LinkItem
        href="https://www.gympass.com/"
        target="_blank"
      >
        <Text>Link</Text>
      </List.LinkItem>
    </List>
  );
});