|
- import React from "react";
-
- // nodejs library that concatenates classes
- import classNames from "classnames";
-
- // @material-ui/core components
- import { makeStyles } from "@material-ui/core/styles";
-
- // @material-ui/icons
- import Dashboard from "@material-ui/icons/Dashboard";
- import LocalGroceryStoreIcon from "@material-ui/icons/LocalGroceryStore";
-
- // Component
- 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 CardFooter from "components/Card/CardFooter.js";
- import Button from "components/CustomButtons/Button.js";
- import styles from "assets/jss/nextjs-material-kit/pages/profilePage.js";
-
- const useStyles = makeStyles(styles);
- const DataProduct = function ({ backend, product, ...props }) {
- const classes = useStyles();
- const { ...rest } = props;
- const imageClasses = classNames(
- classes.imgRaised,
- classes.imgRoundedCircle,
- classes.imgFluid
- );
- const navImageClasses = classNames(classes.imgRounded, classes.imgGallery);
- const Product = product.map((data) => {
- console.log(data);
- return (
- <div>
- <img
- alt="..."
- style={{ height: "350px", display: "block" }}
- src={`${backend}${data.img[0]["url"]}`}
- className={navImageClasses}
- />
- <div align="center">
- <h3><a href={"/product_detail?a="+data.id}>{data.name}</a></h3>
- <h4>Rp.{data.price}</h4>
- <Button color="info" round>
- <LocalGroceryStoreIcon className={classes.icons} />{" "}
- Buy
- </Button>
- </div>
- </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: "Yamaha",
- tabIcon: Dashboard,
- tabContent: (
- <GridContainer justify="center">
- {Product}
- </GridContainer>
- ),
- },
- {
- tabButton: "Suzuki",
- tabIcon: Dashboard,
- tabContent: (
- <GridContainer justify="center">
- {Product}
- </GridContainer>
- ),
- },
- {
- tabButton: "Honda",
- tabIcon: Dashboard,
- tabContent: (
- <GridContainer justify="center">
-
- </GridContainer>
- ),
- },
- {
- tabButton: "Mercedes Benz",
- tabIcon: Dashboard,
- tabContent: (
- <GridContainer justify="center">
-
- </GridContainer>
- ),
- },
- ]}
- />
- </GridItem>
- </GridContainer>
- </CardBody>
- </Card>
- );
- }
-
- export default DataProduct;
|