Enhance the appearance of CardMedia in React Material UI with custom rendering options

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
    }

Answer №1

try out this recommended structure:

<Card className={classes.root}>// with position releative
  <IconButton
    aria-label="console"
    className={classes.rightChip}// with absolutely positioned and higher z-index
    onClick={handleConsole}// your console button for displaying all PC games
  >
    // your PC icon
  </IconButton>
  <Typography variant="body2" color="textSecondary" 
     component="p"className={classes.timer}>//also with absolutely positioned and higher z-index
    {//your timer}
  </Typography>
  <CardActionArea onClick={clickHandler}>
    <CardMedia
      component="img"
      className={classes.gameCover}
      image={game.imagePath}
      title={game.title}
    />
  </CardActionArea>
</Card>

Check out the CodeSandBox link for more details

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilize the atan2() function to rotate a div so that it follows the movement of the mouse

I am trying to create an effect where the mouse aligns with the top of a div and the div rotates as the mouse moves. The rotation should happen when the top part of the div is in line with the mouse cursor. My goal is to achieve this using the atan2 functi ...

The unequal division of space between two flexed child divs is caused by varying image sizes

In my parent container, I have set the display property to flex. Inside, there are two divs with both having flex:1 set. However, the first child div contains an image and takes up twice as much space as the second div. If the screen is 1000px in height, ...

Dividers afloat - expanding current script with multiple additions

I am currently utilizing this website as a hub for showcasing my various web projects. The jsfiddle code provided in response to this particular inquiry is exactly what I need, however, I am unsure of how to have multiple divs moving simultaneously acros ...

What are the benefits of passing callbacks in a React component's props instead of relying on react-redux's connect method?

What is the reason behind callbacks (or redux's dispatch) being commonly passed in a component's props rather than always utilizing the react-redux connect function? Using dispatch (or a function wrapped in dispatch) as a prop: // example.js, i ...

Can we establish communication between the backend and frontend in React JS by utilizing localstorage?

Trying to implement affiliate functionality on my eCommerce platform. The idea is that users who generate links will receive a commission if someone makes a purchase through those links. However, the challenge I'm facing is that I can't store the ...

What is the best way to sort through data retrieved by a server component in a NextJS 13 AppDir?

I've hit a roadblock trying to integrate a search bar that filters server-fetched data in my project using NextJS 13 and AppDir. Despite numerous attempts, I can't seem to get it right. It feels like there's something crucial I'm overlo ...

Developing the search feature using Sequelize

Before diving into the question, let's take a look at the structure of the post table in my current project. module.exports = class Post extends Model { static init(sequelize) { return super.init({ title: { type: DataTypes.TE ...

Nextjs 13 brings exciting new features, one of which is the ability to call getStatic

I am working on a Next.js 13 application where I have organized my files in the 'app' directory instead of the usual 'pages'. All pages are statically generated during build time and data is fetched from an external API. https://i.sstat ...

What is the best way to target only the immediate children of a div when using tailwindcss?

Here is the HTML code snippet I am working with: <div class="section"> <div class="header">header</div> <div class="content"> <div>sub contents 1</div> <di ...

What could be causing my webpage to refresh without any explicit call to reload the page?

I have implemented a collapse component that consists of a dynamic list of arrays. This collapse component includes three features: "compare", "edit", and "delete". The edit feature routes to a new screen, which is functioning correctly. However, the comp ...

Getting Started with Material UI's Default Components

After working with bootstrap, I decided to explore the material ui framework as well. However, when trying to use the default MUI component without customization, such as the card component, I encountered some difficulties. Here is an example of one of th ...

Leveraging HTML div elements for forms can greatly enhance the user

I am in the process of developing a website where users can upload images, name them, and then submit the data to PHP code. Currently, I am using plain HTML and PHP for this project, but I intend to integrate the Bulma CSS library. The current HTML code l ...

The horizontal scrollbar in Chrome is unexpectedly activated, despite elements being set to occupy the full screen width (100vw) using Tailwind and NextJS 13.4+

It took some time to identify the root cause of this issue within a larger project. Hopefully, this Question and Answer will be beneficial to someone else. Here is the scenario -- in a NextJS/Tailwind project, there is only one large vertical element on t ...

Is there a way to prevent downloaded files from becoming corrupted?

When the handleDownload() function is attached to a button as an event handler (onclick), allowing users to download a file, sometimes the downloaded file ends up corrupted. Is there a way to prevent file corruption? function handleDownload() { ...

Node/Express/React: The moment of anticipation after submitting a form and waiting for localhost to respond

In my current project with node/express/react, I am utilizing a form on the frontend to remove entries from the backend database: <form id="delete" action="/delete" method="POST"> <p>First name:</p> <input type="text" name="f ...

Retrieve a date from localStorage before calling the getFullYear() method on it

const storedData = []; const [data, setData] = useState(storedData); "localStorage" useEffect(() => { const dataFromStorage = JSON.parse(localStorage.getItem("data")); if (dataFromStora ...

Trouble arises when attempting to categorize an array of objects in JavaScript

My array consists of various objects: [{id: 1, name: 'Apple', category: 'Fruit'} {id: 2, name: 'Melon', category: 'Fruit'} {id: 3, name: 'iPhone', category: 'Phone'} {id: 4, name: 'Samsung Ga ...

Customize the Underline Color in MaterialUI Select Component

I'm experimenting with MaterialUI and trying to figure out how to customize the underline and text color of the Select component when an item is selected. Currently, the underline and label appear blue after selection with a gray background. Is there ...

Custom palette in Material UI design palette allows users to create

Hey there everyone! I've been working on a website using ReactJS and Material UI, starting with this cool template. One thing I'm trying to do is change the color of the TextField when it's focused. Right now it's blue, but I want it ...

TypeError: Unable to execute products.map as a function

I'm encountering an issue where product.map is not functioning as expected, despite trying multiple fixes found online. Additionally, when I console.log(response.data), it shows a successful response. Using React version 7.0 constructor () { ...