tbg-ecomm-nextjs/pages-sections/yamaha/cart/cart.js

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableContainer from '@material-ui/core/TableContainer';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import Paper from '@material-ui/core/Paper';
import SnackbarContent from "components/Snackbar/SnackbarContent.js";
import classNames from "classnames";
import Grid from '@material-ui/core/Grid';
import GridContainer from "components/Grid/GridContainer.js";
import Card from "components/Card/Card.js";
import Button from "components/CustomButtons/Button.js";
import Icon from "@material-ui/core/Icon";
import MenuItem from '@material-ui/core/MenuItem';
import FormControl from '@material-ui/core/FormControl';
import Select from '@material-ui/core/Select';

    const useStyles = makeStyles({
    table: {
        minWidth: 650,
        },
    });

    const handleChange = (event) => {
    setAge(event.target.value);
    };

    const Cart = function ({ backend, cartproduct, ...props }) {
    const classes = useStyles();
    const { ...rest } = props;
    const imageClasses = classNames(
        classes.imgRaised,
        classes.imgRoundedCircle,
        classes.imgFluid
    );
    const navImageClasses = classNames(classes.imgRounded, classes.imgGallery);

    const CartProduct = cartproduct.map((data) => {
        return ( 
            <div>
            <TableContainer component={Paper}>
                <Table className={classes.table} aria-label="simple table">
                    <TableHead>
                        <TableRow>
                            <TableCell align="center">Product</TableCell>
                            <TableCell align="center">Nama Product</TableCell>
                            <TableCell align="center">Warna</TableCell>
                            <TableCell align="center">Harga Satuan</TableCell>
                            <TableCell align="center">Jumlah Unit</TableCell>
                            <TableCell align="center">Harga Total</TableCell>
                            <TableCell align="center">Aksi</TableCell>
                        </TableRow>
                    </TableHead>
                    <TableBody>
                        <TableRow key={data.name}>
                            <TableCell component="th" scope="row" align="center"><img className={navImageClasses} width="200px" alt="First slide" src={`${backend}${data.img[0]["url"]}`} /></TableCell>
                            <TableCell align="center">{data.name}</TableCell>
                            <TableCell align="center">
                                <FormControl className={classes.formControl}>
                                    <Select
                                    labelId="demo-simple-select-placeholder-label-label"
                                    id="demo-simple-select-placeholder-label"
                                    onChange={handleChange}
                                    displayEmpty
                                    className={classes.selectEmpty}
                                    >
                                    <MenuItem value="">
                                        <em>None</em>
                                    </MenuItem>
                                    <MenuItem value={10}>Hitam</MenuItem>
                                    <MenuItem value={20}>Merah</MenuItem>
                                    <MenuItem value={30}>Biru</MenuItem>
                                    </Select>
                                </FormControl>
                            </TableCell>
                            <TableCell align="center">Rp.{data.price}</TableCell>
                            <TableCell align="center">
                                <FormControl className={classes.formControl}>
                                    <Select
                                    labelId="demo-simple-select-placeholder-label-label"
                                    id="demo-simple-select-placeholder-label"
                                    onChange={handleChange}
                                    displayEmpty
                                    className={classes.selectEmpty}
                                    >
                                    <MenuItem value="">
                                        <em>None</em>
                                    </MenuItem>
                                    <MenuItem value={1}>1</MenuItem>
                                    <MenuItem value={2}>2</MenuItem>
                                    <MenuItem value={3}>3</MenuItem>
                                    <MenuItem value={4}>4</MenuItem>
                                    <MenuItem value={5}>5</MenuItem>
                                    <MenuItem value={6}>6</MenuItem>
                                    <MenuItem value={7}>7</MenuItem>
                                    <MenuItem value={8}>8</MenuItem>
                                    <MenuItem value={9}>9</MenuItem>
                                    <MenuItem value={10}>10</MenuItem>
                                    </Select>
                                </FormControl></TableCell>
                            <TableCell align="center">Rp.{data.price}</TableCell>
                            <TableCell align="center"><a href="#">Hapus</a></TableCell>
                        </TableRow>
                    </TableBody>
                </Table>
            </TableContainer>
            <Card style={{padding:"30px"}}>
                <GridContainer>
                    <Grid item xs>

                    </Grid>
                    <Grid item xs>
                        <div align="right">
                        <h4>Total Semua Harga Produk : Rp.{data.price}</h4>
                        </div>
                    </Grid>
                    <Grid item xs>
                        <Grid item xs>
                            <Button 
                                color="info"
                                href={"/yamaha/cart/checkout?s="+data.id}
                            >
                                <Icon className={classes.icons}>shopping_cart</Icon>
                                Checkout
                            </Button>
                        </Grid>
                    </Grid>
                </GridContainer>
            </Card>
            </div>
        );
    })
    return (
        <div align="center" className={classes.section} id="notifications">
            <div style={{padding:"25px"}}>
            <SnackbarContent
                message={
                    <h2><b>My Cart</b></h2>
                }
                align="center"
                color="danger"
            />
            </div>
            <div style={{padding:"25px"}}>
                {CartProduct}
            </div>
        </div>
    );
    }

export default Cart;