coffee/components/cards/cart-card/CartCard.jsx

import { Box, Button, ButtonGroup, Paper, Typography } from '@mui/material';
import Image from 'next/image';

const CartCard = () => {
  return (
    <Paper
      sx={{
        p: 1,
        width: '88%',
        mb: 2,
        ml: 12,
        backgroundColor: '#f2f2f2',
        display: 'flex',
      }}
      elevation={3}
    >
      <Box sx={{ width: '30%' }}>
        <Image
          src="/images/coffee-mug.svg"
          alt="profile"
          width={500}
          height={300}
        />
      </Box>
      <Box
        sx={{
          ml: -4,
          mr: 2,
          display: 'flex',
          alignItems: 'center',
          width: '30%',
        }}
      >
        <Typography
          sx={{
            width: '100%',
            textAlign: 'center',
            height: 25,
            fontWeight: 600,
            fontSize: 20,
          }}
        >
          Begin Mug in White
        </Typography>
      </Box>
      <Box
        sx={{
          display: 'flex',
          flexDirection: 'column',
          width: '20%',
          alignItems: 'center',
        }}
      >
        <Typography
          sx={{
            width: '100%',
            textAlign: 'center',
            height: 16,
            fontSize: 14,
          }}
        >
          Quantity
        </Typography>
        <ButtonGroup
          size="small"
          aria-label="small outlined button group"
          sx={{
            height: 35,
            width: 125,
            mt: 1,
            backgroundColor: 'primary.main',
            color: 'white',
            border: 0,
          }}
        >
          <Button
            sx={{
              color: 'white',
              fontSize: 17,
              width: 25,
            }}
            onClick={() => {}}
          >
            -
          </Button>
          <Button
            sx={{
              color: 'white',
              fontSize: 15,
              width: 25,
            }}
          >
            1
          </Button>
          <Button
            sx={{
              color: 'white',
              fontSize: 17,
              width: 25,
            }}
            onClick={() => {}}
          >
            +
          </Button>
        </ButtonGroup>
        <Button
          sx={{
            height: 35,
            mt: 1,
            width: 125,
            fontSize: 15,
            textTransform: 'none',
            backgroundColor: '#C6453E',
            color: 'white',
          }}
          startIcon={
            <Image src="/images/x.svg" alt="remove" width={15} height={15} />
          }
        >
          Remove
        </Button>
      </Box>
      <Box
        sx={{ ml: 3, display: 'flex', flexDirection: 'column', width: '20%' }}
      >
        <Typography
          sx={{
            width: '100%',
            textAlign: 'center',
            height: 25,
            fontSize: 20,
          }}
        >
          Total: $20
        </Typography>
      </Box>
    </Paper>
  );
};

export default CartCard;