@mui/material#CardMedia JavaScript Examples

The following examples show how to use @mui/material#CardMedia. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.

Example #1

Source File: OutfitCard.jsx From hr-atx58-fec-havarti with Mozilla Public License 2.0

4 votes

export default function OutfitCard({ OutfitObj, remove }) {
  const classes = useStyles();
  //useContext
  const {
    overviewProduct,
    clickedComponent,
    clickedElement,
    clickTracker,
    selectedStyleState,
  } = useContext(ProductsContext);

  const [overviewProductState, setOverviewProductState] = overviewProduct;
  const [selectedStyle, setSelectedStyle] = selectedStyleState;
  const [clickTrackerFunc] = clickTracker;

  return (
    <Card
      onClick={() =>
        clickTrackerFunc.clickTrackerFunc("Outfit List Item", event.target)
      }
      className={classes.root}
    >
      <CardMedia
        className={classes.media}
        image={
          OutfitObj.photos[0].thumbnail_url
            ? OutfitObj.photos[0].thumbnail_url
            : noImage
        }
        title={OutfitObj.name}
      >
        <Grid container direction="column" alignItems="flex-end">
          <Grid item>
            <HighlightOffIcon
              style={{ fill: "black", fontSize: 45 }}
              onClick={() => {
                remove(OutfitObj);
              }}
            />
          </Grid>
        </Grid>
      </CardMedia>
      <CardActionArea>
        <CardContent
          onClick={() => {
            setOverviewProductState(OutfitObj.overviewProduct);
            setSelectedStyle(OutfitObj.selectedStyleObj);
          }}
        >
          <Typography gutterBottom variant="body1" component="h2">
            {OutfitObj.name}
          </Typography>
          <Typography gutterBottom variant="caption" component="h2">
            {OutfitObj.category}
          </Typography>

          {OutfitObj.sale_price ? (
            <>
              <strike>
                <Typography
                  className={{ textDecoration: "line-through" }}
                  variant="body2"
                  color="textSecondary"
                  component="p"
                >
                  ${OutfitObj.original_price}
                </Typography>
              </strike>
              <Typography
                variant="body2"
                style={{ color: "red" }}
                component="div"
              >
                On sale!! ${OutfitObj.sale_price}{" "}
              </Typography>
            </>
          ) : (
            <Typography variant="body2" color="textSecondary" component="p">
              ${OutfitObj.original_price}
            </Typography>
          )}

          <Typography variant="body2" color="textSecondary" component="p">
            {OutfitObj.description}
          </Typography>
          {/* <StarRatings
            rating={3.75}
            starDimension={"15px"}
            starSpacing={"1px"}
          /> */}
        </CardContent>
      </CardActionArea>
      <CardActions></CardActions>
    </Card>
  );
}

Example #2

Source File: RelatedProductCard.jsx From hr-atx58-fec-havarti with Mozilla Public License 2.0

4 votes

export default function RelatedProductCard({ RelatedObj, updatedWardrobe }) {
  //useContext
  const { overviewProduct, clickTracker } = useContext(ProductsContext);
  const [overviewProductState, setOverviewProductState] = overviewProduct;
  const [clickTrackerFunc] = clickTracker;

  //State
  const [open, setOpen] = React.useState(false);
  const [currentItem, setCurrentItem] = useState({});
  const [compareFeatures, setCompareFeatures] = useState([]);
  const [clickedStar, setClickedStar] = useState(false);
  const [relatedProductName, updateRelatedProductName] = useState("");
  const [relatedProductFeatures, setRelatedProductFeatures] = useState({});
  const [overviewProductFeatures, setOverviewProductFeatures] = useState({});

  const isInitialMount = useRef(true);
  //Component Updates
  useEffect(() => {
    if (isInitialMount.current) {
      isInitialMount.current = false;
    } else {
      if (Object.values(currentItem).length > 0) {
        setCurrentItem({});
        updatedWardrobe(currentItem, clickedStar);
      }
    }
  });
  //Functions
  const handleStarClick = (relatedProduct) => {
    let relatedProductFeaturesObj = {};
    let overviewProductFeaturesObj = {};
    let combinedFeatures = [];

    relatedProduct.features.forEach((feature) => {
      combinedFeatures.push(feature.feature);
      relatedProductFeaturesObj[feature.feature] = feature.value;
    });

    overviewProductState.features.forEach((feature) => {
      combinedFeatures.push(feature.feature);
      overviewProductFeaturesObj[feature.feature] = feature.value;
    });
    updateRelatedProductName(relatedProduct.name);
    setOverviewProductFeatures(overviewProductFeaturesObj);
    setRelatedProductFeatures(relatedProductFeaturesObj);
    setCompareFeatures(combinedFeatures);

    setClickedStar(true);
    handleClickOpen();
  };

  const handleClickOpen = () => {
    setOpen(true);
  };

  const handleClose = () => {
    setClickedStar(false);
    setOpen(false);
  };

  //Styling
  const useStyles = makeStyles({
    root: {
      maxWidth: 500,
    },
    media: {
      height: 250,
    },
    iconDepth: {
      zIndex: 1,
      marginLeft: "auto",
    },
  });

  const classes = useStyles();

  return (
    <Card
      onClick={() =>
        clickTrackerFunc.clickTrackerFunc("Related Products", event.target)
      }
      className={classes.root}
    >
      <CardMedia
        className={classes.media}
        image={RelatedObj.url ? RelatedObj.url : noImage}
      >
        <Grid container direction="column" alignItems="flex-end">
          <Grid id="starClick" item>
            {clickedStar ? (
              <StarBorderIcon
                className={classes.iconDepth}
                onClick={() => {
                  handleStarClick(RelatedObj);
                }}
                color="primary"
                style={{ fontSize: 45, color: "rgb(73, 137, 199)" }}
              />
            ) : (
              <StarIcon
                className={classes.iconDepth}
                onClick={() => {
                  handleStarClick(RelatedObj);
                }}
                color="primary"
                style={{ fontSize: 45, color: "rgb(73, 137, 199)" }}
              />
            )}
          </Grid>
        </Grid>
      </CardMedia>
      <CardActionArea>
        <CardContent
          onClick={() => {
            setOverviewProductState(RelatedObj);
          }}
        >
          <Typography gutterBottom variant="body1" component="h2">
            {RelatedObj.name}
          </Typography>
          <Typography gutterBottom variant="caption" component="h2">
            {RelatedObj.category}
          </Typography>
          <Typography variant="body2" color="textSecondary" component="p">
            ${RelatedObj.default_price}
          </Typography>
          <Typography variant="body2" color="textSecondary" component="p">
            {RelatedObj.description}
          </Typography>
          {/* <StarRatings rating={2} starDimension={"15px"} starSpacing={"1px"} /> */}
        </CardContent>
      </CardActionArea>
      <CardActions>
        <ModalPopup
          maxWidth={"lg"}
          compareFeatures={compareFeatures}
          relatedProductName={relatedProductName}
          relatedProductFeatures={relatedProductFeatures}
          overviewProductFeatures={overviewProductFeatures}
          open={open}
          onClose={handleClose}
        />
      </CardActions>
    </Card>
  );
}