|
- import React from "react";
- import classNames from "classnames";
-
- import { makeStyles } from "@material-ui/core/styles";
- 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 Button from "components/CustomButtons/Button.js";
- import styles from "assets/jss/nextjs-material-kit/pages/profilePage.js";
- import Icon from "@material-ui/core/Icon";
- import { Motorcycle } from "@material-ui/icons";
-
- const useStyles = makeStyles(styles);
- const DataProduct = function ({ backend, maxi, matic, naked, sport, offroad, moped, monsterenergy, cbu, ...props }) {
- const classes = useStyles();
- const { ...rest } = props;
- const imageClasses = classNames(
- classes.imgRaised,
- classes.imgRoundedCircle,
- classes.imgFluid
- );
- const navImageClasses = classNames(classes.imgRounded, classes.imgGallery);
- const Productmaxi = maxi.map((data) => {
- return (
- <div style={{padding: "20px", marginTop:"-40px"}}>
- <Card className={classes.textCenter} align="center" style={{width:"350px"}}>
- <CardBody>
- <div style={{padding:"10px"}}>
- <img style={{ width: "250px", display: "block" }} src={`${backend}${data.img[0]["url"]}`} className={navImageClasses}
- />
- <div align="center">
- <h5>{data.name}</h5>
- <h5>Rp.{data.price}
- {/* <NumberFormat value={data.price} displayType={'text'} thousandSeparator={true} prefix={'$'} /> */}
- </h5>
- <Button
- color="info" round
- href={"/yamaha/product/product_detail?s="+data.id}
- >
- <Icon className={classes.icons}>open_in_new</Icon>Detail Product
- </Button>
- <Button
- color="info" round
- href={"/yamaha/cart/checkout?s="+data.id}
- >
- <Icon className={classes.icons}>shopping_cart</Icon>Add to Cart
- </Button>
- </div>
- </div>
- </CardBody>
- </Card>
- </div>
- );
- })
- const Productmatic = matic.map((data) => {
- return (
- <div style={{padding: "20px", marginTop:"-40px"}}>
- <Card className={classes.textCenter} align="center" style={{width:"350px"}}>
- <CardBody>
- <div style={{padding:"10px"}}>
- <img style={{ width: "250px", display: "block" }} src={`${backend}${data.img[0]["url"]}`} className={navImageClasses}
- />
- <div align="center">
- <h5>{data.name}</h5>
- <h5>Rp.{data.price}</h5>
- <Button
- color="info" round
- href={"/yamaha/product/product_detail?s="+data.id}
- >
- <Icon className={classes.icons}>open_in_new</Icon>Detail Product
- </Button>
- <Button
- color="info" round
- href={"/yamaha/cart/checkout?s="+data.id}
- >
- <Icon className={classes.icons}>shopping_cart</Icon>Add to Cart
- </Button>
- </div>
- </div>
- </CardBody>
- </Card>
- </div>
- );
- })
- const Productnaked = naked.map((data) => {
- return (
- <div style={{padding: "20px", marginTop:"-40px"}}>
- <Card className={classes.textCenter} align="center" style={{width:"350px"}}>
- <CardBody>
- <div style={{padding:"10px"}}>
- <img style={{ width: "250px", display: "block" }} src={`${backend}${data.img[0]["url"]}`} className={navImageClasses}
- />
- <div align="center">
- <h5>{data.name}</h5>
- <h5>Rp.{data.price}</h5>
- <Button
- color="info" round
- href={"/yamaha/product/product_detail?s="+data.id}
- >
- <Icon className={classes.icons}>open_in_new</Icon>Detail Product
- </Button>
- <Button
- color="info" round
- href={"/yamaha/cart/checkout?s="+data.id}
- >
- <Icon className={classes.icons}>shopping_cart</Icon>Add to Cart
- </Button>
- </div>
- </div>
- </CardBody>
- </Card>
- </div>
- );
- })
- const Productsport = sport.map((data) => {
- return (
- <div style={{padding: "20px", marginTop:"-40px"}}>
- <Card className={classes.textCenter} align="center" style={{width:"350px"}}>
- <CardBody>
- <div style={{padding:"10px"}}>
- <img style={{ width: "250px", display: "block" }} src={`${backend}${data.img[0]["url"]}`} className={navImageClasses}
- />
- <div align="center">
- <h5>{data.name}</h5>
- <h5>Rp.{data.price}</h5>
- <Button
- color="info" round
- href={"/yamaha/product/product_detail?s="+data.id}
- >
- <Icon className={classes.icons}>open_in_new</Icon>Detail Product
- </Button>
- <Button
- color="info" round
- href={"/yamaha/cart/checkout?s="+data.id}
- >
- <Icon className={classes.icons}>shopping_cart</Icon>Add to Cart
- </Button>
- </div>
- </div>
- </CardBody>
- </Card>
- </div>
- );
- })
- const Productoffroad = offroad.map((data) => {
- return (
- <div style={{padding: "20px", marginTop:"-40px"}}>
- <Card className={classes.textCenter} align="center" style={{width:"350px"}}>
- <CardBody>
- <div style={{padding:"10px"}}>
- <img style={{ width: "250px", display: "block" }} src={`${backend}${data.img[0]["url"]}`} className={navImageClasses}
- />
- <div align="center">
- <h5>{data.name}</h5>
- <h5>Rp.{data.price}</h5>
- <Button
- color="info" round
- href={"/yamaha/product/product_detail?s="+data.id}
- >
- <Icon className={classes.icons}>open_in_new</Icon>Detail Product
- </Button>
- <Button
- color="info" round
- href={"/yamaha/cart/checkout?s="+data.id}
- >
- <Icon className={classes.icons}>shopping_cart</Icon>Add to Cart
- </Button>
- </div>
- </div>
- </CardBody>
- </Card>
- </div>
- );
- })
- const Productmoped = moped.map((data) => {
- return (
- <div style={{padding: "20px", marginTop:"-40px"}}>
- <Card className={classes.textCenter} align="center" style={{width:"350px"}}>
- <CardBody>
- <div style={{padding:"10px"}}>
- <img style={{ width: "250px", display: "block" }} src={`${backend}${data.img[0]["url"]}`} className={navImageClasses}
- />
- <div align="center">
- <h5>{data.name}</h5>
- <h5>Rp.{data.price}</h5>
- <Button
- color="info" round
- href={"/yamaha/product/product_detail?s="+data.id}
- >
- <Icon className={classes.icons}>open_in_new</Icon>Detail Product
- </Button>
- <Button
- color="info" round
- href={"/yamaha/cart/checkout?s="+data.id}
- >
- <Icon className={classes.icons}>shopping_cart</Icon>Add to Cart
- </Button>
- </div>
- </div>
- </CardBody>
- </Card>
- </div>
- );
- })
- const Productmonsterenergy = monsterenergy.map((data) => {
- return (
- <div style={{padding: "20px", marginTop:"-40px"}}>
- <Card className={classes.textCenter} align="center" style={{width:"350px"}}>
- <CardBody>
- <div style={{padding:"10px"}}>
- <img style={{ width: "250px", display: "block" }} src={`${backend}${data.img[0]["url"]}`} className={navImageClasses}
- />
- <div align="center">
- <h5>{data.name}</h5>
- <h5>Rp.{data.price}</h5>
- <Button
- color="info" round
- href={"/yamaha/product/product_detail?s="+data.id}
- >
- <Icon className={classes.icons}>open_in_new</Icon>Detail Product
- </Button>
- <Button
- color="info" round
- href={"/yamaha/cart/checkout?s="+data.id}
- >
- <Icon className={classes.icons}>shopping_cart</Icon>Add to Cart
- </Button>
- </div>
- </div>
- </CardBody>
- </Card>
- </div>
- );
- })
- const Productcbu = cbu.map((data) => {
- return (
- <div style={{padding: "20px", marginTop:"-40px"}}>
- <Card className={classes.textCenter} align="center" style={{width:"350px"}}>
- <CardBody>
- <div style={{padding:"10px"}}>
- <img style={{ width: "250px", display: "block" }} src={`${backend}${data.img[0]["url"]}`} className={navImageClasses}
- />
- <div align="center">
- <h5>{data.name}</h5>
- <h5>Rp.{data.price}</h5>
- <Button
- color="info" round
- href={"/yamaha/product/product_detail?s="+data.id}
- >
- <Icon className={classes.icons}>open_in_new</Icon>Detail Product
- </Button>
- <Button
- color="info" round
- href={"/yamaha/cart/checkout?s="+data.id}
- >
- <Icon className={classes.icons}>shopping_cart</Icon>Add to Cart
- </Button>
- </div>
- </div>
- </CardBody>
- </Card>
- </div>
- );
- })
- return (
- <Card className={classes.textCenter}>
- <div align="center">
- <CardHeader color="info">Product</CardHeader>
- </div>
- <CardBody>
- <div align="center">
- <h2>Product & Facilities</h2>
- </div>
- <GridContainer justify="center">
- <GridItem>
- <NavPills
- alignCenter
- color="primary"
- tabs={[
- {
- tabButton: "Maxi",
- tabIcon: Motorcycle,
- tabContent: (
- <GridContainer justify="center">
- {Productmaxi}
- </GridContainer>
- ),
- },
- {
- tabButton: "Matic",
- tabIcon: Motorcycle,
- tabContent: (
- <GridContainer justify="center">
- {Productmatic}
- </GridContainer>
- ),
- },
- {
- tabButton: "Naked Bike",
- tabIcon: Motorcycle,
- tabContent: (
- <GridContainer justify="center">
- {Productnaked}
- </GridContainer>
- ),
- },
- {
- tabButton: "Sport",
- tabIcon: Motorcycle,
- tabContent: (
- <GridContainer justify="center">
- {Productsport}
- </GridContainer>
- ),
- },
- {
- tabButton: "Off Road",
- tabIcon: Motorcycle,
- tabContent: (
- <GridContainer justify="center">
- {Productoffroad}
- </GridContainer>
- ),
- },
- {
- tabButton: "Moped",
- tabIcon: Motorcycle,
- tabContent: (
- <GridContainer justify="center">
- {Productmoped}
- </GridContainer>
- ),
- },
- {
- tabButton: "Monster Energy MotoGP",
- tabIcon: Motorcycle,
- tabContent: (
- <GridContainer justify="center">
- {Productmonsterenergy}
- </GridContainer>
- ),
- },
- {
- tabButton: "CBU",
- tabIcon: Motorcycle,
- tabContent: (
- <GridContainer justify="center">
- {Productcbu}
- </GridContainer>
- ),
- },
- {
- tabButton: "ATV",
- tabIcon: Motorcycle,
- tabContent: (
- <GridContainer justify="center">
- {Productcbu}
- </GridContainer>
- ),
- },
- ]}
- />
- </GridItem>
- </GridContainer>
- </CardBody>
- </Card>
- );
- }
-
- export default DataProduct;
|