Rating

import { Box, Rating } from '@gympass/yoga';

const Center = props => (
  <Box
    display="flex"
    flexDirection="column"
    {...props}
  />
);

render(
  <Center>
    <Rating value={1} />
    <Rating value={1.5} />
    <Rating value={2} />
    <Rating value={2.5} />
    <Rating value={3} />
    <Rating value={3.5} />
    <Rating value={4} />
    <Rating value={4.5} />
  </Center>,
);
const Center = props => (
  <Box
    display="flex"
    flexDirection="column"
    {...props}
  />
);

render(
  <Center>
    <Rating value={1} />
    <Rating value={1.5} />
    <Rating value={2} />
    <Rating value={2.5} />
    <Rating value={3} />
    <Rating value={3.5} />
    <Rating value={4} />
    <Rating value={4.5} />
  </Center>,
);

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

render(() => {
  const [rating, setRating] = useState(2);

  return <Rating value={rating} onRate={setRating} readOnly={false} />;
});
render(() => {
  const [rating, setRating] = useState(2);

  return <Rating value={rating} onRate={setRating} readOnly={false} />;
});

import { FavoriteFilled, LikeFilled, CompassFilled, DislikeFilled, UserFilled, SmartphoneFilled, PlayFilled } from '@gympass/yoga-icons';
import { Box, Rating } from '@gympass/yoga';

const Center = props => (
  <Box
    display="flex"
    flexDirection="column"
    {...props}
  />
);

render(
  <Center>
    <Rating value={1} />
    <Rating icon={{ type: FavoriteFilled }} value={1.5} />
    <Rating icon={{ type: LikeFilled }} value={2} />
    <Rating icon={{ type: CompassFilled }} value={2.5} />
    <Rating icon={{ type: DislikeFilled }} value={3} />
    <Rating icon={{ type: UserFilled }} value={3.5} />
    <Rating icon={{ type: SmartphoneFilled }} value={4} />
    <Rating icon={{ type: PlayFilled }} value={4.5} />
  </Center>,
);
const Center = props => (
  <Box
    display="flex"
    flexDirection="column"
    {...props}
  />
);

render(
  <Center>
    <Rating value={1} />
    <Rating icon={{ type: FavoriteFilled }} value={1.5} />
    <Rating icon={{ type: LikeFilled }} value={2} />
    <Rating icon={{ type: CompassFilled }} value={2.5} />
    <Rating icon={{ type: DislikeFilled }} value={3} />
    <Rating icon={{ type: UserFilled }} value={3.5} />
    <Rating icon={{ type: SmartphoneFilled }} value={4} />
    <Rating icon={{ type: PlayFilled }} value={4.5} />
  </Center>,
);