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

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

import Button from "components/CustomButtons/Button.js";
import Icon from "@material-ui/core/Icon";
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 GridContainer from "components/Grid/GridContainer.js";
import SnackbarContent from "components/Snackbar/SnackbarContent.js";
import { MoveToInboxOutlined } from "@material-ui/icons";

const useStyles = makeStyles(styles);

const DataHelmet = function ({ selected, handleName, backend, helmet, mtx, extreme, ranger, fighter, swirl, classic, uno, ...props }) {
    const classes = useStyles();
    const { ...rest } = props;
    const imageClasses = classNames(
        classes.imgRaised,
        classes.imgRoundedCircle,
        classes.imgFluid
    );
    const navImageClasses = classNames(classes.imgRounded, classes.imgGallery);
    const ProductHelmetRConcepts = helmet.map((data) => {
        return (      
            <div style={{padding: "20px", marginTop:"-40px"}}>   
            <Card className={classes.textCenter} align="center" style={{width:"300px"}}>
                <CardBody>
                <div align="center" style={{padding:"10px"}}>
                    <img style={{ width: "200px", display: "block" }} src={`${backend}${data.img["url"]}`} className={navImageClasses}
                    />
                    <div align="center">
                    <h5>{data.name}</h5>
                    <h5>Rp.{data.price}</h5>
                    <Button 
                        color="info" round
                        href={"/product/helmet_details?s="+data.id}
                    >
                        <Icon className={classes.icons}>open_in_new</Icon>Detail Product
                    </Button>
                    </div>
                </div>
                </CardBody>
            </Card>
            </div>
        );
    })
    const ProductHelmetMTX = mtx.map((data) => {
        return (      
            <div style={{padding: "20px", marginTop:"-40px"}}>   
            <Card className={classes.textCenter} align="center" style={{width:"300px"}}>
                <CardBody>
                <div align="center" style={{padding:"10px"}}>
                    <img style={{ width: "200px", display: "block" }} src={`${backend}${data.img["url"]}`} className={navImageClasses}
                    />
                    <div align="center">
                    <h5>{data.name}</h5>
                    <h5>Rp.{data.price}</h5>
                    <Button 
                        color="info" round
                        href={"/product/helmet_details?s="+data.id}
                    >
                        <Icon className={classes.icons}>open_in_new</Icon>Detail Product
                    </Button>
                    </div>
                </div>
                </CardBody>
            </Card>
            </div>
        );
    })
    const ProductHelmetExtreme = extreme.map((data) => {
        return (      
            <div style={{padding: "20px", marginTop:"-40px"}}>   
            <Card className={classes.textCenter} align="center" style={{width:"300px"}}>
                <CardBody>
                <div align="center" style={{padding:"10px"}}>
                    <img style={{ width: "200px", display: "block" }} src={`${backend}${data.img["url"]}`} className={navImageClasses}
                    />
                    <div align="center">
                    <h5>{data.name}</h5>
                    <h5>Rp.{data.price}</h5>
                    <Button 
                        color="info" round
                        href={"/product/helmet_details?s="+data.id}
                    >
                        <Icon className={classes.icons}>open_in_new</Icon>Detail Product
                    </Button>
                    </div>
                </div>
                </CardBody>
            </Card>
            </div>
        );
    })
    const ProductHelmetRanger = ranger.map((data) => {
        return (      
            <div style={{padding: "20px", marginTop:"-40px"}}>   
            <Card className={classes.textCenter} align="center" style={{width:"300px"}}>
                <CardBody>
                <div align="center" style={{padding:"10px"}}>
                    <img style={{ width: "200px", display: "block" }} src={`${backend}${data.img["url"]}`} className={navImageClasses}
                    />
                    <div align="center">
                    <h5>{data.name}</h5>
                    <h5>Rp.{data.price}</h5>
                    <Button 
                        color="info" round
                        href={"/product/helmet_details?s="+data.id}
                    >
                        <Icon className={classes.icons}>open_in_new</Icon>Detail Product
                    </Button>
                    </div>
                </div>
                </CardBody>
            </Card>
            </div>
        );
    })
    const ProductHelmetFighter = fighter.map((data) => {
        return (      
            <div style={{padding: "20px", marginTop:"-40px"}}>   
            <Card className={classes.textCenter} align="center" style={{width:"300px"}}>
                <CardBody>
                <div align="center" style={{padding:"10px"}}>
                    <img style={{ width: "200px", display: "block" }} src={`${backend}${data.img["url"]}`} className={navImageClasses}
                    />
                    <div align="center">
                    <h5>{data.name}</h5>
                    <h5>Rp.{data.price}</h5>
                    <Button 
                        color="info" round
                        href={"/product/helmet_details?s="+data.id}
                    >
                        <Icon className={classes.icons}>open_in_new</Icon>Detail Product
                    </Button>
                    </div>
                </div>
                </CardBody>
            </Card>
            </div>
        );
    })
    const ProductHelmetSwirl = swirl.map((data) => {
        return (      
            <div style={{padding: "20px", marginTop:"-40px"}}>   
            <Card className={classes.textCenter} align="center" style={{width:"300px"}}>
                <CardBody>
                <div align="center" style={{padding:"10px"}}>
                    <img style={{ width: "200px", display: "block" }} src={`${backend}${data.img["url"]}`} className={navImageClasses}
                    />
                    <div align="center">
                    <h5>{data.name}</h5>
                    <h5>Rp.{data.price}</h5>
                    <Button 
                        color="info" round
                        href={"/product/helmet_details?s="+data.id}
                    >
                        <Icon className={classes.icons}>open_in_new</Icon>Detail Product
                    </Button>
                    </div>
                </div>
                </CardBody>
            </Card>
            </div>
        );
    })
    const ProductHelmetClassic = classic.map((data) => {
        return (      
            <div style={{padding: "20px", marginTop:"-40px"}}>   
            <Card className={classes.textCenter} align="center" style={{width:"300px"}}>
                <CardBody>
                <div align="center" style={{padding:"10px"}}>
                    <img style={{ width: "200px", height:"200px", display: "block" }} src={`${backend}${data.img["url"]}`} className={navImageClasses}
                    />
                    <div align="center">
                    <h5>{data.name}</h5>
                    <h5>Rp.{data.price}</h5>
                    <Button 
                        color="info" round
                        href={"/product/helmet_details?s="+data.id}
                    >
                        <Icon className={classes.icons}>open_in_new</Icon>Detail Product
                    </Button>
                    </div>
                </div>
                </CardBody>
            </Card>
            </div>
        );
    })
    const ProductHelmetUno = uno.map((data) => {
        return (      
            <div style={{padding: "20px", marginTop:"-40px"}}>   
            <Card className={classes.textCenter} align="center" style={{width:"300px"}}>
                <CardBody>
                <div align="center" style={{padding:"10px"}}>
                    <img style={{ width: "200px", display: "block" }} src={`${backend}${data.img["url"]}`} className={navImageClasses}
                    />
                    <div align="center">
                    <h5>{data.name}</h5>
                    <h5>Rp.{data.price}</h5>
                    <Button 
                        color="info" round
                        href={"/product/helmet_details?s="+data.id}
                    >
                        <Icon className={classes.icons}>open_in_new</Icon>Detail Product
                    </Button>
                    </div>
                </div>
                </CardBody>
            </Card>
            </div>
        );
    })
    return (
        <div>
        <Card className={classes.textCenter} style={{padding:"5px"}}>
            <CardBody>
            <div align="center" style={{marginTop:"-50px"}}>
                <h2>Yamaha Helmet</h2>
                <Select
                    value={(selected)?helmet.filter((i)=>i.id==selected):null} 
                    getOptionLabel={option => `${option.name}`}
                    getOptionValue={option => option.id}
                    options={helmet}
                    isMulti
                    instanceId="name"
                    placeholder="Search"
                    onChange={values => handleName(values)}
                />
                <br></br><br></br><br></br>
            </div>
            <div align="center" style={{marginTop:"-50px"}}>
                <div align="center" className={classes.section} id="notifications">
                    <SnackbarContent
                    message={
                        <h4>R CONCEPT</h4>
                    }
                    align="center"
                    color="danger"
                    />
                </div>
                <GridContainer justify="center" style={{padding:"40px", marginTop:"-50px"}}>
                    {ProductHelmetRConcepts}
                </GridContainer>
            </div><br></br><br></br>
            <div align="center" style={{marginTop:"-50px"}}>
                <div align="center" className={classes.section} id="notifications">
                    <SnackbarContent
                    message={
                        <h4>MTX</h4>
                    }
                    align="center"
                    color="danger"
                    />
                </div>
                <GridContainer justify="center" style={{padding:"40px", marginTop:"-50px"}}>
                    {ProductHelmetMTX}
                </GridContainer>
            </div><br></br><br></br>
            <div align="center" style={{marginTop:"-50px"}}>
                <div align="center" className={classes.section} id="notifications">
                    <SnackbarContent
                    message={
                        <h4>EXTREME</h4>
                    }
                    align="center"
                    color="danger"
                    />
                </div>
                <GridContainer justify="center" style={{padding:"40px", marginTop:"-50px"}}>
                    {ProductHelmetExtreme}
                </GridContainer>
            </div><br></br><br></br>
            <div align="center" style={{marginTop:"-50px"}}>
                <div align="center" className={classes.section} id="notifications">
                    <SnackbarContent
                    message={
                        <h4>RANGER</h4>
                    }
                    align="center"
                    color="danger"
                    />
                </div>
                <GridContainer justify="center" style={{padding:"40px", marginTop:"-50px"}}>
                    {ProductHelmetRanger}
                </GridContainer>
            </div><br></br><br></br>
            <div align="center" style={{marginTop:"-50px"}}>
                <div align="center" className={classes.section} id="notifications">
                    <SnackbarContent
                    message={
                        <h4>FIGHTER</h4>
                    }
                    align="center"
                    color="danger"
                    />
                </div>
                <GridContainer justify="center" style={{padding:"40px", marginTop:"-50px"}}>
                    {ProductHelmetFighter}
                </GridContainer>
            </div><br></br><br></br>
            <div align="center" style={{marginTop:"-50px"}}>
                <div align="center" className={classes.section} id="notifications">
                    <SnackbarContent
                    message={
                        <h4>SWIRL</h4>
                    }
                    align="center"
                    color="danger"
                    />
                </div>
                <GridContainer justify="center" style={{padding:"40px", marginTop:"-50px"}}>
                    {ProductHelmetSwirl}
                </GridContainer>
            </div><br></br><br></br>
            <div align="center" style={{marginTop:"-50px"}}>
                <div align="center" className={classes.section} id="notifications">
                    <SnackbarContent
                    message={
                        <h4>CLASSIC</h4>
                    }
                    align="center"
                    color="danger"
                    />
                </div>
                <GridContainer justify="center" style={{padding:"40px", marginTop:"-50px"}}>
                    {ProductHelmetClassic}
                </GridContainer>
            </div><br></br><br></br>
            <div align="center" style={{marginTop:"-50px"}}>
                <div align="center" className={classes.section} id="notifications">
                    <SnackbarContent
                    message={
                        <h4>UNO</h4>
                    }
                    align="center"
                    color="danger"
                    />
                </div>
                <GridContainer justify="center" style={{padding:"40px", marginTop:"-50px"}}>
                    {ProductHelmetUno}
                </GridContainer>
            </div><br></br><br></br>
            </CardBody>
        </Card>
        </div>
    );
}

export default DataHelmet;