tbg-company-ecomm-web/components/Sales/Sales_Detail.js

import React from 'react';
import Link from 'next/link';
import * as Icon from 'react-feather';

import { FaWhatsapp } from "react-icons/fa";
import { FaRegEnvelope } from "react-icons/fa";
import { FaPhoneAlt } from "react-icons/fa";

const Sales = function ({ backend, sales, ...props }) {

    const DataSales = sales.map((data) => {
        return (
            <div>
                <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>
                <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />

                <div class="jumbotron" style={{ backgroundColor: "#000" }}>
                    <div className="single-team" style={{ backgroundColor: "#000" }}>
                        <img src="/images/Sales/Logo Star.png" width="180px" alt="image" style={{ marginTop: "-50px" }} />

                        <div className="team-content">
                            <h1 style={{ color: "#fff" }}>{data.name}</h1>
                            <p style={{ color: "#fff" }}><strong>{data.job_title}</strong></p>
                        </div>
                    </div>
                    <div align="center" style={{ marginTop: "-30px" }}>
                        <Link href={`tel:${data.telp}`}>
                            <button style={{ marginRight: "10px", borderRadius: "5px", backgroundColor: "#80808080", color: "#fff", padding: "12px 16px", border: "none", fontSize: "15px" }}><i class="fa fa-phone"></i> CALL US</button>
                        </Link>
                        <Link href={`mailto:${data.email}`}>
                            <button style={{ borderRadius: "5px", backgroundColor: "#80808080", color: "#fff", padding: "12px 16px", border: "none", fontSize: "15px" }}><i class="fa fa-envelope"></i> EMAIL US</button>
                        </Link>
                        <Link href={`https://wa.me/62${data.wa}`}>
                            <button style={{ marginLeft: "10px", borderRadius: "5px", backgroundColor: "#80808080", color: "#fff", padding: "12px 16px", border: "none", fontSize: "15px" }}><i class="fa fa-whatsapp"></i> WA US</button>
                        </Link>
                    </div>
                </div>

                <div class="table-responsive" style={{marginTop:"-30px"}}>
                    <table class="table">
                        <thead>
                            <tr>
                                <th style={{textAlign:"right"}} width="50%">
                                    <Link href={`tel:${data.telp}`}>
                                        <a target="_blank"><Icon.Phone style={{ color: "#000", marginTop: "-20px" }} /></a>
                                    </Link>
                                </th>
                                <th align="right" width="50%">{data.telp} <br /> Mobile </th>
                                <th></th>
                                <th/><th/>
                            </tr>
                            <tr >
                                <th style={{textAlign:"right"}}>
                                    <Link href={`mailto:${data.email}`}>
                                        <a target="_blank"><Icon.Mail style={{ color: "#000", marginTop: "-20px" }} /></a>
                                    </Link>
                                </th>
                                <th>{data.email} <br /> Email </th>
                                <th></th>
                                <th/><th/>
                            </tr>
                            <tr>
                                <th style={{textAlign:"right"}}>
                                    <Link href="https://www.google.co.id/maps/place/Mercedes-Benz+-+PT.+THAMRIN+CITRA+ABADI/@-2.946646,104.7294956,17z/data=!3m1!4b1!4m5!3m4!1s0x2e3b7439cb4d6c0b:0xf12bc3dc2ab868f4!8m2!3d-2.9466514!4d104.7316843?hl=id">
                                        <a target="_blank"><Icon.MapPin style={{ color: "#000", marginTop: "-20px" }} /></a>
                                    </Link>
                                </th>
                                <th>{data.company} <br /> {data.job_title} </th>
                                <th></th>
                                <th/><th/>
                            </tr>
                            <tr>
                                <th style={{textAlign:"right"}}>
                                    <Link href="https://www.thamrin.mercedes-benz.co.id/en/desktop/passenger-cars.html">
                                        <a target="_blank"><Icon.Globe style={{ color: "#000", marginTop: "-20px" }} /><br /></a>
                                    </Link>
                                </th>
                                <th>thamrin.mercedes-benz.co.id<br /> Website </th>
                                <th></th>
                                <th/><th/>
                            </tr>
                        </thead>
                    </table>
                </div>

            </div>
        )
    })
    return (
        <div>
            {DataSales}
        </div>
    )
}

export default Sales;