Shipping Done

src/components/ShippingForm/ShippingForm.jsx

@@ -0,0 +1,168 @@
+import React, { useState } from 'react';
+import {
+  Box,
+  TextField,
+  Button,
+  Typography,
+  MenuItem,
+  RadioGroup,
+  FormControlLabel,
+  Radio,
+} from '@mui/material';
+import Grid from '@mui/material/Grid2';
+
+const ShippingForm = () => {
+  const [shippingMethod, setShippingMethod] = useState('COD');
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    // Handle form submission logic
+    console.log('Form submitted');
+  };
+
+  const FieldContainer = ({ label, children }) => (
+    <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
+      <Typography variant="body1" sx={{ fontWeight: 500, minWidth: 120 }}>
+        {label}
+      </Typography>
+      {children}
+    </Box>
+  );
+
+  return (
+    <Box
+      component="form"
+      onSubmit={handleSubmit}
+      sx={{
+        width: '100%',
+        mx: 'auto',
+        mt: 4,
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 3,
+      }}
+    >
+      <Grid container>
+
+        <Grid item size={6} sx={{ gap: 3, display: 'flex', flexDirection: 'column' }}>
+          <FieldContainer label="Title">
+            <TextField variant="outlined" fullWidth required />
+          </FieldContainer>
+
+          <FieldContainer label="First Name">
+            <TextField variant="outlined" fullWidth required />
+          </FieldContainer>
+
+          <FieldContainer label="Last Name">
+            <TextField variant="outlined" fullWidth required />
+          </FieldContainer>
+
+          <FieldContainer label="Country">
+            <TextField select variant="outlined" fullWidth required>
+              <MenuItem value="USA">USA</MenuItem>
+              <MenuItem value="Canada">Canada</MenuItem>
+              <MenuItem value="UK">UK</MenuItem>
+              {/* Add more countries as needed */}
+            </TextField>
+          </FieldContainer>
+        </Grid>
+
+        <Grid item size={6} sx={{ gap: 3, display: 'flex', flexDirection: 'column', px: 4, height: "100%" }}>
+
+          <Grid
+            container
+            spacing={2}
+            sx={{ position: 'relative', width: '100%', backgroundColor: '#F7FBFF', textAlign: 'center' }}
+          >
+            {/* First Section */}
+            <Grid
+              item
+              size={12}
+              sx={{ px: 5, py: 3, borderBottom: '1px solid #ddd', mx: "auto" }}
+            >
+              <Typography variant="h6" sx={{ fontWeight: 500 }}>
+                SHIPPING RESTRICTIONS AND DUTIES MAY APPLY
+              </Typography>
+            </Grid>
+
+            {/* Second Section */}
+            <Grid item size={12} sx={{ px: 5, py: 3, mx: "auto" }}>
+              <Typography variant="h6" sx={{ fontWeight: 500 }}>
+                NEED HELP?
+              </Typography>
+              <Typography variant="body2" sx={{ mb: 1 }}>CALL US: +44 (0)10 2345 6789</Typography>
+              <Typography variant="body2" sx={{ mb: 1 }}>EMAIL CUSTOMER CARE | SHIPPING INFORMATION</Typography>
+              <Typography variant="body2" sx={{ mb: 1 }}>RETURNS & EXCHANGES</Typography>
+            </Grid>
+          </Grid>
+
+        </Grid>
+
+      </Grid>
+
+      <FieldContainer label="Address Line 1">
+        <TextField variant="outlined" fullWidth required multiline rows={3} />
+      </FieldContainer>
+
+      <FieldContainer label="Address Line 2">
+        <TextField variant="outlined" fullWidth multiline rows={3} />
+      </FieldContainer>
+
+      <FieldContainer label="City">
+        <TextField variant="outlined" fullWidth required />
+      </FieldContainer>
+
+      <FieldContainer label="Country/Province">
+        <TextField variant="outlined" fullWidth required />
+      </FieldContainer>
+
+      <FieldContainer label="Postcode/Zip">
+        <TextField variant="outlined" fullWidth required />
+      </FieldContainer>
+
+      <FieldContainer label="Telephone">
+        <TextField variant="outlined" fullWidth required />
+      </FieldContainer>
+
+      <FieldContainer label="Mobile">
+        <TextField variant="outlined" fullWidth />
+      </FieldContainer>
+
+      <FieldContainer label="Shipping Method">
+        <RadioGroup
+          value={shippingMethod}
+          onChange={(e) => setShippingMethod(e.target.value)}
+        >
+          <FormControlLabel
+            value="COD"
+            control={<Radio />}
+            label="Cash on Delivery (COD)"
+          />
+          <FormControlLabel
+            value="Postage"
+            control={<Radio />}
+            label="Postage"
+          />
+        </RadioGroup>
+      </FieldContainer>
+
+      <Button
+        variant="contained"
+        color="common.black"
+        onClick={() => { window.location.href = "/checkout" }}
+        sx={{
+          backgroundColor: (theme) => theme.palette.common.black,
+          color: "white",
+          textTransform: "none",
+          px: 8,
+          py: 2,
+          width: "fit-content",
+          "&:hover": {
+            backgroundColor: (theme) => theme.palette.grey[900],
+          },
+        }}>SIGN IN</Button>
+    </Box>
+  );
+};
+
+export default ShippingForm;

src/components/ShippingForm/index.js

@@ -0,0 +1 @@
+export { default } from './ShippingForm'

src/pages/Checkout.jsx

@@ -1,10 +1,10 @@
-import React, {useState} from 'react'
+import React, { useState } from 'react'
 import { Box, Button, IconButton, TextField, Typography } from '@mui/material'
 import SocialMedia from '../components/SocialMedia'
 import Feature from '../components/Feature'
 import LoginForm from '../components/LoginForm'
 import SignUpForm from '../components/SignUpForm'
-
+import ShippingForm from '../components/ShippingForm'
 
 import Grid from '@mui/material/Grid2';
 
@@ -36,10 +36,10 @@ const Checkout = () => {
 
         <Grid item size={12} sx={{ borderTop: "1px solid rgba(0,0,0,0.2)", borderBottom: "1px solid rgba(0,0,0,0.2)", display: "flex", justifyContent: "space-evenly", py: 1 }}>
 
-          <Typography variant="body1" onClick={()=>{setContent(0)}} sx={{cursor:"pointer", color:(content == 0) ? "#93ABC7" : "black" }}>Login</Typography> 
-          <Typography variant="body1" onClick={()=>{setContent(1)}} sx={{cursor:"pointer", color:(content == 1) ? "#93ABC7" : "black" }}>Shipping</Typography> 
-          <Typography variant="body1" onClick={()=>{setContent(2)}} sx={{cursor:"pointer", color:(content == 2) ? "#93ABC7" : "black" }}>Billing</Typography> 
-          <Typography variant="body1" onClick={()=>{setContent(3)}} sx={{cursor:"pointer", color:(content == 3) ? "#93ABC7" : "black" }}>Confirmation</Typography>
+          <Typography variant="body1" onClick={() => { setContent(0) }} sx={{ cursor: "pointer", color: (content == 0) ? "#93ABC7" : "black" }}>Login</Typography>
+          <Typography variant="body1" onClick={() => { setContent(1) }} sx={{ cursor: "pointer", color: (content == 1) ? "#93ABC7" : "black" }}>Shipping</Typography>
+          <Typography variant="body1" onClick={() => { setContent(2) }} sx={{ cursor: "pointer", color: (content == 2) ? "#93ABC7" : "black" }}>Billing</Typography>
+          <Typography variant="body1" onClick={() => { setContent(3) }} sx={{ cursor: "pointer", color: (content == 3) ? "#93ABC7" : "black" }}>Confirmation</Typography>
 
         </Grid>
 
@@ -64,7 +64,7 @@ const Checkout = () => {
 
           <Typography variant="body2">Make purchases faster using previously saved details. Track previous orders and easily request returns from the website.</Typography>
 
-          <LoginForm/>
+          <LoginForm />
 
         </Grid>
 
@@ -72,7 +72,18 @@ const Checkout = () => {
 
           <Typography variant="body2">You’ll need an account to purchase watches, track and review orders, and manage your personal details.</Typography>
 
-          <SignUpForm/>
+          <SignUpForm />
+
+        </Grid>
+
+
+      </Grid>}
+
+      {(content == 1) && <Grid container sx={{ mb: 5 }}>
+
+        <Grid item size={12}>
+
+          <ShippingForm/>
 
         </Grid>