tbg-ecomm-nextjs/pages-sections/honda/carrer/carrer.js

import React from "react";
import classNames from "classnames";

import { makeStyles } from "@material-ui/core/styles";
import Dashboard from "@material-ui/icons/Dashboard";

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

const useStyles = makeStyles(styles);

const DataCarrers = function ({ backend, s1, d3, sma, ...props }) {
    const classes = useStyles();
    const { ...rest } = props;
    const imageClasses = classNames(
        classes.imgRaised,
        classes.imgRoundedCircle,
        classes.imgFluid
    );
    const navImageClasses = classNames(classes.imgRounded, classes.imgGallery);
    const CarrerS1 = s1.map((data) => {
        return (
        <Grid style={{width:"600px", padding:"30px"}}>
            <Card>
            <CardHeader color="danger"><div align="center">{data.name}</div></CardHeader>
            <CardBody>
                <Quote
                text={data.name_description}
                author="Post By Thamrin Group"
                />
                Masa Pendaftaran : {data.start_regis} s/d {data.until_regis}
                <Button color="danger" style={{marginLeft:"20px"}} round href={"/honda/carrer_details?s="+data.id}>
                    <Icon className={classes.icons}>open_in_new</Icon>Detail Carrer
                </Button>
            </CardBody>
            </Card>
        </Grid>
        );
    })
    const CarrerD3 = d3.map((data) => {
        return (
        <Grid style={{width:"600px", padding:"30px"}}>
            <Card>
            <CardHeader color="danger">{data.name}</CardHeader>
            <CardBody>
                <Quote
                text={data.name_description}
                author="Post By Thamrin Group"
                />
                Masa Pendaftaran : {data.start_regis} s/d {data.until_regis}
                <Button color="danger" style={{marginLeft:"20px"}} round href={"/honda/carrer_details?s="+data.id}>
                    <Icon className={classes.icons}>open_in_new</Icon>Detail Carrer
                </Button>
            </CardBody>
            </Card>
        </Grid>
        );
    })
    const CarrerSMA = sma.map((data) => {
        return (
        <Grid style={{width:"600px", padding:"30px"}}>
            <Card>
            <CardHeader justify="center" color="danger">{data.name}</CardHeader>
            <CardBody>
                <Quote
                text={data.name_description}
                author="Post By Thamrin Group"
                />
                Masa Pendaftaran : {data.start_regis} s/d {data.until_regis}
                <Button color="danger" style={{marginLeft:"20px"}} round href={"/honda/carrer_details?s="+data.id}>
                    <Icon className={classes.icons}>open_in_new</Icon>Detail Carrer
                </Button>
            </CardBody>
            </Card>
        </Grid>
        );
    })
    return (
        <Card className={classes.textCenter}>
        <div align="center">
            <CardHeader color="info">Product</CardHeader>
        </div>
        <CardBody>
            <div align="center">
            <h2>Carrer & Job Vacancies</h2>
            </div>
            <GridContainer justify="center">
                <GridItem>
                <NavPills
                    alignCenter
                    color="primary"
                    tabs={[
                    {
                        tabButton: "S1",
                        tabIcon: Dashboard,
                        tabContent: (
                        <GridContainer justify="center">
                            {CarrerS1}
                        </GridContainer>
                        ),
                    },
                    {
                        tabButton: "D3",
                        tabIcon: Dashboard,
                        tabContent: (
                        <GridContainer justify="center">
                            {CarrerD3}
                        </GridContainer>
                        ),
                    },
                    {
                        tabButton: "SMA / SMK ",
                        tabIcon: Dashboard,
                        tabContent: (
                        <GridContainer justify="center">
                            {CarrerSMA}
                        </GridContainer>
                        ),
                    },
                    {
                        tabButton: "Recruitment Process",
                        tabIcon: Dashboard,
                        tabContent: (
                        <GridContainer justify="center">
                            <GridItem>
                            <div align="center">
                            <img
                                alt="..."
                                style={{ width: "1000px", height: "800px", display: "block" }}
                                src=" https://www.yamaha-motor.co.id/uploads/career/big_img/5d305eca19dfb8171.jpg"
                                className={navImageClasses}
                            />
                            </div>
                            </GridItem>
                        </GridContainer>
                        ),
                    },
                    ]}
                />
                </GridItem>
            </GridContainer>
        </CardBody>
        </Card>
    );
}

export default DataCarrers;