tbg-ecomm-nextjs/pages-sections/product/ygp.js

import React from "react";
import { makeStyles } from "@material-ui/core/styles";

import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/notificationsStyles.js";
import Card from "components/Card/Card.js";
import CardBody from "components/Card/CardBody.js";
import CardHeader from "components/Card/CardHeader.js";

const useStyles = makeStyles(styles);

const DataYGP = function ({ backend, ygp, ...props }) {
    const classes = useStyles();
    return (
        <div>
        <Card className={classes.textCenter} align="center" style={{padding:"5px"}}>
            <div align="center">
            <CardHeader justify="center" color="info" style={{padding:"10px"}}> 
                <h2>Yamaha Geniue Part</h2>
            </CardHeader>
            </div>
            <CardBody>
                <h2>Yamaha Geniue Part</h2>
            </CardBody>
        </Card>
        </div>
    );
}

export default DataYGP;