quotes_generator_custom_ratings.js

import React from "react";
import { withStyles, makeStyles } from "@material-ui/core/styles";
import Rating from "@material-ui/lab/Rating";
import FavoriteIcon from "@material-ui/icons/Favorite";
import Typography from "@material-ui/core/Typography";
import Box from "@material-ui/core/Box";
import { Grid } from "@material-ui/core";

const useStyles = makeStyles((theme) => ({
  starRating: {
    position: "absolute",
    top: "85%",
    background: "rgba(0,0,0,0.6)",
    borderRadius: "5px",
    // justifyContent: "center",
    alignItems: "center",
    display: "flex",
    // flexDirection: "column",
    // margin: "auto",
    color: "white",
  },
}));

const StyledRating = withStyles({
  iconEmpty: {
    color: "#ffffff",
  },
  iconFilled: {
    color: "#ff6d75",
  },
  iconHover: {
    color: "#ff3d47",
  },
})(Rating);

const labels = {
  1: "Useless",
  2: "Meh!",
  3: "Ok",
  4: "Good",
  5: "Awesome",
};

function CustomizedRatings({ submitRating, value, setValue }) {
  const classes = useStyles();
  const [hover, setHover] = React.useState(-1);

  return (
    <div className={classes.starRating}>
      <Box component="fieldset" mb={3} borderColor="transparent">
        <Typography component="legend" style={{ paddingTop: "10px" }}>
          Tell us how much you liked the quote
        </Typography>
        <Grid
          container
          style={{ justifyContent: "center", alignItems: "center" }}
        >
          <StyledRating
            name="rating"
            value={value}
            getLabelText={(value) => `${value} Heart${value !== 1 ? "s" : ""}`}
            precision={1}
            icon={<FavoriteIcon fontSize="inherit" />}
            size="large"
            onChange={(event, newValue) => {
              setValue(newValue);
              submitRating(newValue);
            }}
            onChangeActive={(event, newHover) => {
              setHover(newHover);
            }}
            // onMouseDown = {()=>submitRating(value)}
          />
          {/* </Grid> */}
          <Grid item xs={4} sm={4} md={4}>
            {value !== null && (
              <Box ml={2}>{labels[hover !== -1 ? hover : value]}</Box>
            )}
          </Grid>
        </Grid>
      </Box>
    </div>
  );
}

export default CustomizedRatings;