feat: shipping page

components/checkout-content/CheckoutContent.jsx

@@ -3,7 +3,7 @@ import { Box } from '@mui/system';
 import DataCard from '../cards/data-card/DataCard';
 import ShippingDetailsForm from '../forms/shipping-details/ShippingDetailsForm';
 
-const ProfileContent = () => {
+const CheckoutContent = () => {
   return (
     <Grid container spacing={2} sx={{ py: 10, height: '100%', width: '100%' }}>
       <Grid item xs={12}>
@@ -47,4 +47,4 @@ const ProfileContent = () => {
   );
 };
 
-export default ProfileContent;
+export default CheckoutContent;

components/shipping-content/ShippingContent.jsx

@@ -0,0 +1,178 @@
+import {
+  Breadcrumbs,
+  Button,
+  Checkbox,
+  Divider,
+  FormControlLabel,
+  Grid,
+  Typography,
+} from '@mui/material';
+import { Box } from '@mui/system';
+import DataCard from '../cards/data-card/DataCard';
+
+const ShippingContent = () => {
+  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' }}
+        >
+          Shipping
+        </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>Cart</Typography>
+          <Typography>Checkout</Typography>
+          <Typography color="red">Shipping</Typography>
+        </Breadcrumbs>
+      </Grid>
+      <Grid item xs={12} sx={{ mt: 1 }}>
+        <Typography sx={{ pl: 12, fontSize: 20 }}>
+          The following fields will be used as the shipping details for your
+          order
+        </Typography>
+      </Grid>
+      <Grid item xs={8}>
+        <Box
+          sx={{
+            display: 'flex',
+            justifyContent: 'space-between',
+            backgroundColor: '#f2f2f2',
+            alignItems: 'center',
+            mt: 2,
+            ml: 12,
+            mb: 2,
+            width: '90%',
+            borderRadius: 2,
+            p: 1,
+          }}
+        >
+          <Typography sx={{ fontSize: 18, fontWeight: 600 }}>
+            Contact
+          </Typography>
+          <Typography>johndoe@test.com | 0601234567</Typography>
+          <Button
+            sx={{
+              height: 35,
+
+              width: 125,
+              fontSize: 15,
+              textTransform: 'none',
+              backgroundColor: '#CBA213',
+              color: 'white',
+            }}
+          >
+            Change
+          </Button>
+        </Box>
+        <Box
+          sx={{
+            display: 'flex',
+            justifyContent: 'space-between',
+            backgroundColor: '#f2f2f2',
+            alignItems: 'center',
+            ml: 12,
+            mb: 2,
+            width: '90%',
+            borderRadius: 2,
+            p: 1,
+          }}
+        >
+          <Typography sx={{ fontSize: 18, fontWeight: 600 }}>
+            Shipping to
+          </Typography>
+          <Typography>1684 Upton Avenue | Locke Mills</Typography>
+          <Button
+            sx={{
+              height: 35,
+              width: 125,
+              fontSize: 15,
+              textTransform: 'none',
+              backgroundColor: '#CBA213',
+              color: 'white',
+            }}
+          >
+            Change
+          </Button>
+        </Box>
+        <Box
+          sx={{
+            display: 'flex',
+            justifyContent: 'space-between',
+            backgroundColor: '#f2f2f2',
+            alignItems: 'center',
+            ml: 12,
+            mb: 2,
+            width: '30%',
+            borderRadius: 2,
+            p: 1,
+          }}
+        >
+          <FormControlLabel
+            control={<Checkbox checked disabled />}
+            label="Free Shipping"
+            sx={{ color: 'black', ml: 2 }}
+          />
+        </Box>
+        <Box
+          sx={{
+            display: 'flex',
+            ml: 12,
+            mb: 2,
+            borderRadius: 2,
+            p: 1,
+          }}
+        >
+          <Button
+            variant="contained"
+            sx={{
+              mt: 3,
+              mb: 2,
+              height: 50,
+              width: 150,
+              textTransform: 'none',
+              backgroundColor: 'primary.main',
+              color: 'white',
+              mr: 2,
+            }}
+          >
+            Back to cart
+          </Button>
+          <Button
+            type="submit"
+            variant="contained"
+            sx={{
+              mt: 3,
+              mb: 2,
+              backgroundColor: '#CBA213',
+              height: 50,
+              width: 200,
+              textTransform: 'none',
+              color: 'white',
+            }}
+          >
+            Continue to payment
+          </Button>
+        </Box>
+      </Grid>
+      <Grid item xs={4}>
+        <Box sx={{ width: '80%', mt: 2 }}>
+          <DataCard></DataCard>
+          <DataCard></DataCard>
+          <DataCard></DataCard>
+        </Box>
+      </Grid>
+    </Grid>
+  );
+};
+
+export default ShippingContent;

pages/shipping/index.js

@@ -0,0 +1,7 @@
+import ShippingContent from '../../components/shipping-content/ShippingContent';
+
+const ShippingPage = () => {
+  return <ShippingContent></ShippingContent>;
+};
+
+export default ShippingPage;