I am looking for guidance on how to position my components within an image using Material UI. Specifically, I want to move my heart component to the top right corner of the image and place the ratings at the bottom.
import image from "../../Assets/pic.jpg";
import React, { useState } from "react";
import { makeStyles } from "@material-ui/core/styles";
import Card from "@material-ui/core/Card";
import CardActionArea from "@material-ui/core/CardActionArea";
import FavoriteBorderIcon from "@material-ui/icons/FavoriteBorder";
import CardContent from "@material-ui/core/CardContent";
import CardMedia from "@material-ui/core/CardMedia";
import Typography from "@material-ui/core/Typography";
import Grid from "@material-ui/core/Grid";
import styles from "./Cards.module.css";
import Stars from "../Stars/Stars";
const useStyles = makeStyles({
root: {
maxWidth: 345,
display: "flex",
},
text: {
textAlign: "center",
color: "#333333",
},
textCardBottom: {
display: "flex",
justifyContent: "center",
},
textPrice: { color: "#333333" },
textStrike: { margin: "0px 10px 0px 10px" },
textDiscount: { color: "#ff6a6a" },
stars: {
right: 9,
},
ratings: {},
});
const Cards = () => {
const [showComponent, setShowComponent] = useState(false);
const classes = useStyles();
const handleToggleHoverIn = (event) => {
event.preventDefault();
setShowComponent(true);
};
const handleToggleHoverOut = (event) => {
event.preventDefault();
setShowComponent(false);
};
console.log("The state showComponent value is ", showComponent);
return (
<Card
onMouseEnter={handleToggleHoverIn}
onMouseLeave={handleToggleHoverOut}
className={classes.root}
>
<CardActionArea>
<CardMedia
component="img"
alt=""
image={image}
title="Contemplative Reptile"
/>
{/* {showComponent ? ( */}
<Grid container>
<Stars right="40%" /> // placing this rating component in the center of the image
<FavoriteBorderIcon fontSize="large" /> // moving this heart to the top right corner
</Grid>
{/* ) : null} */}
<CardContent>
<Typography
gutterBottom
variant="h5"
component="h2"
className={classes.text}
>
Printed round Neck
</Typography>
<Typography
variant="body2"
color="textSecondary"
component="div"
className={classes.textCardBottom}
>
<Typography
variant="body2"
color="textSecondary"
component="b"
className={classes.textPrice}
>
Rs. 454
</Typography>
<Typography
variant="body2"
color="textSecondary"
component="strike"
className={classes.textStrike}
>
Rs. 699
</Typography>
<Typography
variant="body2"
color="textSecondary"
component="span"
className={classes.textDiscount}
>
(35 % off)
</Typography>
{/* <p>
<b>Rs. 454</b>
<strike>Rs. 699</strike>
<span style={{ color: "#FF7F7F" }}> (35 % off) </span>
</p> */}
</Typography>
</CardContent>
</CardActionArea>
</Card>
);
};
export default Cards;
https://i.stack.imgur.com/Rxyn6.png
https://i.stack.imgur.com/jLSoO.png
I experimented with the positioning properties in Material UI but faced challenges in moving the components as desired. Despite consulting the Material UI documentation, I couldn't find suitable properties to achieve the desired layout.