tbg-ecomm-nextjs/pages-sections/sales/sales_detail.js

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

import classNames from "classnames";
import styles from "assets/jss/nextjs-material-kit/pages/profilePage.js";
import Grid from '@material-ui/core/Grid';
import GridContainer from "components/Grid/GridContainer.js";
import GridItem from "components/Grid/GridItem.js";
import Card from "components/Card/Card.js";
import CardBody from "components/Card/CardBody.js";
import CardHeader from "components/Card/CardHeader.js";
import Button from "components/CustomButtons/Button.js";
import Paginations from "components/Pagination/Pagination.js";
import Icon from "@material-ui/core/Icon";

import Logo from "assets/img/Logo Star.png";

import Email from "@material-ui/icons/Email";
import Phone from "@material-ui/icons/Phone";
import Wa from "@material-ui/icons/WhatsApp";
import Bag from "@material-ui/icons/BusinessOutlined";
import LanguageIcon from "@material-ui/icons/Language";

const useStyles = makeStyles(styles);

const DataLatestNews = function ({ backend, sales, ...props }) {
    const classes = useStyles();
    const imageClasses = classNames(
        classes.imgRaised,
        classes.imgRoundedCircle,
        classes.imgFluid
    );
    const navImageClasses = classNames(classes.imgRounded, classes.imgGallery);
    const DataSales = sales.map((data) => {
        return (
            <div className={classes.container}>
                <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" />
                <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
                <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
                <GridContainer justify="center">
                    <GridItem xs={12} sm={12} md={6}>
                        <div className={classes.profile}>
                            <div class="jumbotron" style={{ backgroundColor: "#000", marginLeft: "-15px", marginRight: "-15px" }}>
                                <br /><br />
                                <img className="image" src={Logo} />
                                <div style={{marginTop:"-70px"}}>
                                    <h1 style={{ color: "#fff" }}>{data.name}</h1>
                                    <p style={{ color: "#fff" }}><strong>{data.job_title}</strong></p>
                                </div>
                                <br />
                                <Button color="primary" round href={`tel:${data.telp}`} target="_blank">
                                    <Phone className={classes.icons} /> Call Us
                                </Button>
                                <Button color="primary" round href={`mailto:${data.email}`} target="_blank">
                                    <Email className={classes.icons} /> Email Us
                                </Button>
                                <Button color="primary" round href={`https://wa.me/62${data.wa}`} target="_blank">
                                    <Wa className={classes.icons} /> WA Us
                                </Button>
                            </div>
                            <div class="table-responsive" align="left">
                                <table class="table">
                                    <thead>
                                        <tr>
                                            <th>
                                                <Button color="primary" round>
                                                    <Phone className={classes.icons} />
                                                </Button>
                                            </th>
                                            <th>{data.telp} <br /> Mobile </th>
                                        </tr>
                                        <tr>
                                            <th>
                                                <Button color="primary" round>
                                                    <Email className={classes.icons} />
                                                </Button>
                                            </th>
                                            <th>{data.email} <br /> Email </th>
                                        </tr>
                                        <tr>
                                            <th>
                                                <Button color="primary" round>
                                                    <Bag className={classes.icons} />
                                                </Button>
                                            </th>
                                            <th>{data.company} <br /> {data.job_title} </th>
                                        </tr>
                                        <tr>
                                            <th>
                                                <Button color="primary" round>
                                                    <LanguageIcon className={classes.icons} />
                                                </Button>
                                            </th>
                                            <th>thamrin.mercedes-benz.co.id<br /> Website </th>
                                        </tr>
                                    </thead>
                                </table>
                            </div>
                        </div>
                    </GridItem>
                </GridContainer>
            </div>
        );
    })
    return (
        <div>
            {DataSales}
        </div>
    );
}

export default DataLatestNews;