coffee/components/cart-content/CartContent.jsx

import { Breadcrumbs, Divider, Grid, Typography } from '@mui/material';
import { Box } from '@mui/system';
import CartCard from '../cards/cart-card/CartCard';
import OrderSummaryCard from '../cards/order-summary-card/OrderSummaryCard';

const CartContent = () => {
  return (
    <Grid container spacing={2} sx={{ py: 10, height: '100%', width: '100%' }}>
      <Grid item xs={12}>
        <Typography
          variant="h3"
          sx={{ pl: 12, mt: 12, height: '100%', color: 'primary.main' }}
        >
          Items in Your Cart
        </Typography>
      </Grid>
      <Grid item xs={12}>
        <Divider sx={{ backgroundColor: 'primary.main', mx: 12 }} />
      </Grid>
      <Grid item xs={12} sx={{ mt: 4 }}>
        <Breadcrumbs
          aria-label="breadcrumb"
          separator="›"
          sx={{ pl: 12, fontSize: 20 }}
        >
          <Typography color="red">Cart</Typography>
          <Typography></Typography>
        </Breadcrumbs>
      </Grid>
      <Grid item xs={8}>
        <CartCard></CartCard>
        <CartCard></CartCard>
        <CartCard></CartCard>
      </Grid>
      <Grid item xs={4}>
        <Box sx={{ width: '80%', mt: 2 }}>
          <OrderSummaryCard data={{ totalPrice: 60 }}></OrderSummaryCard>
        </Box>
      </Grid>
    </Grid>
  );
};

export default CartContent;