feat: setup cart total

package.json

@@ -15,6 +15,7 @@
     "@mui/icons-material": "^5.13.7",
     "@mui/material": "^5.13.7",
     "@mui/styled-engine-sc": "^5.12.0",
+    "@mui/x-data-grid": "^6.9.2",
     "@reduxjs/toolkit": "^1.9.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

src/App.tsx

@@ -12,6 +12,7 @@ import Shop from './scenes/Shop';
 import Contact from './scenes/Contact';
 import Error from './scenes/Error';
 import Checkout from './scenes/Checkout';
+import Cart from './scenes/Cart';
 
 const App = () => {
   const mode = useAppSelector((state) => state.global.mode) as PaletteMode;
@@ -29,6 +30,7 @@ const App = () => {
             <Route path='/shop' element={<Shop />} />
             <Route path='/contact' element={<Contact />} />
             <Route path='/checkout' element={<Checkout />} />
+            <Route path='/cart' element={<Cart />} />
             <Route path='/mock' element={<Mock />} />
             <Route path='*' element={<Error />} />
           </Route>

src/scenes/Cart/index.tsx

@@ -0,0 +1,83 @@
+import { Box, Button, Container, Grid, Typography, useTheme } from '@mui/material';
+import { DataGrid, GridColDef, GridValueGetterParams } from '@mui/x-data-grid';
+import Header from '../../components/Header';
+import FlexBetween from '../../components/FlexBetween';
+
+const Cart = () => {
+  const classes = {
+    cartContainer: {
+      background: '#F9F1E7',
+      width: '393px',
+      height: '390px',
+      display: 'flex',
+      flexDirection: 'column',
+      justifyContent: 'space-around',
+      p: '1.5rem 2.5rem',
+    },
+    title: {
+      color: '#000',
+      fontSize: '32px',
+      fontStyle: 'normal',
+      fontWeight: '600',
+      lineHeight: 'normal',
+    },
+    subtitle: {
+      color: '#9F9F9F',
+      fontSize: '16px',
+      fontStyle: 'normal',
+      fontWeight: '400',
+      lineHeight: 'normal',
+    },
+    highlight: {
+      color: 'var(--primary, #B88E2F)',
+      fontSize: '20px',
+      fontStyle: 'normal',
+      fontWeight: '500',
+      lineHeight: 'normal',
+    },
+    orderBtn: {
+      border: '1px solid #000',
+      padding: '0.5rem 1.5rem',
+      color: '#000',
+      letterSpacing: '1.25px',
+    },
+  };
+  return (
+    <>
+      <Header title='Cart' location='Home' location1='Cart' />
+      <Container
+        maxWidth='xl'
+        sx={{ p: '2.5rem 1.5rem', m: '3.5rem auto', border: '1px solid #000' }}
+      >
+        <Grid container>
+          {/* LEFT */}
+          <Grid item xs={12} md={6} lg={8}></Grid>
+          <Grid item xs={12} md={6} lg={4}>
+            {/* RIGHT */}
+            <Box sx={classes.cartContainer}>
+              <Typography sx={classes.title} textAlign={'center'}>
+                Cart Totals
+              </Typography>
+              <FlexBetween>
+                <Typography variant='h6'>Subtotal</Typography>
+                <Typography variant='subtitle1' sx={classes.subtitle}>
+                  Rs 250000
+                </Typography>
+              </FlexBetween>
+              <FlexBetween>
+                <Typography variant='h6'>Total</Typography>
+                <Typography variant='subtitle1' fontSize='1rem'>
+                  Rs 250000
+                </Typography>
+              </FlexBetween>
+
+              <Button sx={classes.orderBtn}>Check Out</Button>
+            </Box>
+          </Grid>
+        </Grid>
+      </Container>
+    </>
+  );
+};
+
+export default Cart;

src/scenes/Checkout/index.tsx

@@ -135,7 +135,6 @@ const Checkout = () => {
               Your personal data will be used to support your experience throughout this website, to
               manage access to your account, and for other purposes described in our privacy policy.
             </Typography>
-
             <Box textAlign={'center'}>
               <Button sx={classes.orderBtn}>Place order</Button>
             </Box>

yarn.lock

@@ -1540,7 +1540,7 @@
   resolved "https://registry.yarnpkg.com/@mui/types/-/types-7.2.4.tgz#b6fade19323b754c5c6de679a38f068fd50b9328"
   integrity sha512-LBcwa8rN84bKF+f5sDyku42w1NTxaPgPyYKODsh01U1fVstTClbUoSA96oyRBnSNyEiAVjKm6Gwx9vjR+xyqHA==
 
-"@mui/utils@^5.13.7":
+"@mui/utils@^5.13.6", "@mui/utils@^5.13.7":
   version "5.13.7"
   resolved "https://registry.yarnpkg.com/@mui/utils/-/utils-5.13.7.tgz#7e6a8336e05eb2642667a5c02eb605351e27ec20"
   integrity sha512-/3BLptG/q0u36eYED7Nhf4fKXmcKb6LjjT7ZMwhZIZSdSxVqDqSTmATW3a56n3KEPQUXCU9TpxAfCBQhs6brVA==
@@ -1551,6 +1551,17 @@
     prop-types "^15.8.1"
     react-is "^18.2.0"
 
+"@mui/x-data-grid@^6.9.2":
+  version "6.9.2"
+  resolved "https://registry.yarnpkg.com/@mui/x-data-grid/-/x-data-grid-6.9.2.tgz#530497b7592bc8242d591fbdedea771eb130d1c3"
+  integrity sha512-hrjVq3FrbUpioi2GYSWJtU4NR3V4bPwLbXngw07+I21TGOWV1TKeTslkPI+FGVYU3gMjGSSJRFN8gehPlh5Evw==
+  dependencies:
+    "@babel/runtime" "^7.22.5"
+    "@mui/utils" "^5.13.6"
+    clsx "^1.2.1"
+    prop-types "^15.8.1"
+    reselect "^4.1.8"
+
 "@nicolo-ribaudo/[email protected]":
   version "2.1.8-no-fsevents.3"
   resolved "https://registry.yarnpkg.com/@nicolo-ribaudo/chokidar-2/-/chokidar-2-2.1.8-no-fsevents.3.tgz#323d72dd25103d0c4fbdce89dadf574a787b1f9b"