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';
import TextField from '@material-ui/core/TextField';

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}>
                                        <TextField
                                            id="outlined-number"
                                            type="number"
                                            align="center"
                                            InputLabelProps={{
                                                shrink: true,
                                            }}
                                        />
                                    </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;