diff --git a/package.json b/package.json index 90f1142..fe5f54a 100644 --- a/package.json +++ b/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", diff --git a/src/App.tsx b/src/App.tsx index 6ac16e1..4ca41df 100644 --- a/src/App.tsx +++ b/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 = () => { } /> } /> } /> + } /> } /> } /> diff --git a/src/scenes/Cart/index.tsx b/src/scenes/Cart/index.tsx new file mode 100644 index 0000000..d0fccc9 --- /dev/null +++ b/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 ( + <> +
+ + + {/* LEFT */} + + + {/* RIGHT */} + + + Cart Totals + + + Subtotal + + Rs 250000 + + + + Total + + Rs 250000 + + + + + + + + + + ); +}; + +export default Cart; diff --git a/src/scenes/Checkout/index.tsx b/src/scenes/Checkout/index.tsx index a512896..c871193 100644 --- a/src/scenes/Checkout/index.tsx +++ b/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. - diff --git a/yarn.lock b/yarn.lock index 95f3f3b..af6343f 100644 --- a/yarn.lock +++ b/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/chokidar-2@2.1.8-no-fsevents.3": 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"