Hino_Thamrin/components/Common/new/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 ({ sales, ...props }) {
    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 className="jumbotron" style={{ backgroundColor: "#000" }}>
            <div className="single-team" style={{ backgroundColor: "#000" }}>
                <img src={(sales.DP.data)?`/api/util?img=${encodeURIComponent(sales.DP.sales.attributes.url)}`:`/images/default_sales_DP/${sales.Company.data?sales.Company.data.attributes.Name.toLowerCase():"/images/Sales/Logo Star.png"}.png`} width="180px" alt="image" style={{ marginTop: "-50px" }} />

                <div className="team-content">
                    <h1 style={{ color: "#fff" }}>{sales.Name}</h1>
                    <p style={{ color: "#fff" }}><strong>Sales Consultant</strong></p>
                </div>
            </div>
            <div align="center" style={{ marginTop: "-30px" }}>
                <Link href={`tel:${sales.Telp}`}>
                    <a style={{ marginRight: "10px", borderRadius: "50px", backgroundColor: "#212121", color: "#fff", padding: "15px 20px", border: "none", fontSize: "15px" }}><i className="fa fa-phone"></i> <b>CALL US</b></a>
                </Link>
                <Link href={`mailto:${sales.Email}`}>
                    <a style={{ borderRadius: "50px", backgroundColor: "#212121", color: "#fff", padding: "15px 20px", border: "none", fontSize: "15px" }}><i className="fa fa-envelope"></i> <b>EMAIL US</b></a>
                </Link>
                <Link href={`https://wa.me/62${sales.WA}`}>
                    <a style={{ marginLeft: "10px", borderRadius: "50px", backgroundColor: "#212121", color: "#fff", padding: "15px 20px", border: "none", fontSize: "15px" }}><i className="fa fa-whatsapp"></i> <b>WA US</b></a>
                </Link>
            </div>
        </div>

        <div style={{ marginTop: "-30px" }}>
            <table className="table">
                <thead>
                    <tr>
                        <th style={{ textAlign: "right" }} width="50%">
                            <Link href={`tel:${sales.Telp}`}>
                                <a style={{ textAlign:'center',width: "90px", marginRight: "10px", borderRadius: "50px", backgroundColor: "#000", color: "#fff", padding: "12px 16px", border: "none", fontSize: "15px" }}><i className="fa fa-phone"></i></a>
                            </Link>
                        </th>
                        <th align="right" width="50%">{sales.Telp} <br /> Mobile </th>
                        <th></th>
                        <th /><th />
                    </tr>
                    <tr >
                        <th style={{ textAlign: "right" }}>
                            <Link href={`mailto:${sales.Email}`}>
                                <a style={{ textAlign:'center',width: "90px", marginRight: "10px", borderRadius: "50px", backgroundColor: "#000", color: "#fff", padding: "12px 16px", border: "none", fontSize: "15px" }}><i className="fa fa-envelope"></i></a>
                            </Link>
                        </th>
                        <th>{sales.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 style={{ textAlign:'center',width: "90px", marginRight: "10px", borderRadius: "50px", backgroundColor: "#000", color: "#fff", padding: "12px 16px", border: "none", fontSize: "15px" }}><i className="fa fa-map-marker"></i></a>
                            </Link>
                        </th>
                        <th>{sales.Company.data?sales.Company.data.attributes.Name:''} <br /> Sales Consultant </th>
                        <th></th>
                        <th /><th />
                    </tr>
                    <tr>
                        <th style={{ textAlign: "right" }}>
                            <Link href={(sales.Company.data?sales.Company.data.attributes.Website:"https://www.thamrin.mercedes-benz.co.id/en/desktop/passenger-cars.html")}>
                                <a style={{ textAlign:'center',width: "90px", marginRight: "10px", borderRadius: "50px", backgroundColor: "#000", color: "#fff", padding: "12px 16px", border: "none", fontSize: "15px" }}><i className="fa fa-globe"></i></a>
                            </Link>
                        </th>
                        <th>{(sales.Company.data?sales.Company.data.attributes.Website:'thamrin.mercedes-benz.co.id')}<br /> Website </th>
                        <th></th>
                        <th /><th />
                    </tr>
                </thead>
            </table>
        </div>

    </div>
    )
}

export default Sales;