I am curious about how I can customize the CardMedia component of React Material UI to achieve a design similar to this:
https://i.sstatic.net/Spdbz.png
In the desired result, there are 3 elements:
The image itself in WebP format (see example)
A duration (for example 06:59:14), enclosed in a box to differentiate it from the image
A platform logo in SVG format, enclosed in a box to differentiate it from the image
Currently, I have stored all the platform SVG icons in a file like this:
export default {
"PC": `
// SVG path data for PC platform icon
`
}
This can be used as follows:
import iconsSVG from "./PlatformIcons";
import SvgIcon from '@material-ui/core/SvgIcon';
//...
let platform = "PC";
<SvgIcon titleAccess={platform}>
<path d={iconsSVG[platform]} />
</SvgIcon>
//...
Thank you in advance
EDIT : Here is the complete implementation of my Card component:
import React from "react";
import {useTranslation} from "react-i18next";
// Other imports from Material UI and React Router
const useStyles = makeStyles((theme) => ({
// Styles for different elements
}));
function CardEntry(props) {
// Component logic
return (
<Card>
// Card content
</Card>
);
}
export default CardEntry;
With an example of data:
{
// Sample game data
}