done billing form

src/components/BillingForm/BillingForm.jsx

@@ -0,0 +1,145 @@
+import React, { useState } from 'react';
+import {
+  Box,
+  TextField,
+  Button,
+  Typography,
+  MenuItem,
+  RadioGroup,
+  FormControlLabel,
+  Radio,
+} from '@mui/material';
+import Table from '@mui/material/Table';
+import TableBody from '@mui/material/TableBody';
+import TableCell from '@mui/material/TableCell';
+import TableContainer from '@mui/material/TableContainer';
+import TableHead from '@mui/material/TableHead';
+import TableRow from '@mui/material/TableRow';
+import Grid from '@mui/material/Grid2';
+
+const BillingForm = () => {
+
+  const rows = [
+    {
+      img_src: 'https://via.placeholder.com/300',
+      name: 'MELUR',
+      description: 'Atma Sari New Raya Collection 2024',
+      colour: 'black',
+      quantity: 1,
+      price: 335.50
+    }
+  ];
+
+  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
+     
+      onSubmit={handleSubmit}
+      sx={{
+        width: '100%',
+      }}
+    >
+      
+      {/* Product List */}
+      <TableContainer>
+          <Table sx={{ minWidth: 650, mb: 5, backgroundColor:"#F7FBFF" }}>
+            <TableHead>
+              <TableRow>
+                <TableCell width={150}>
+                  <Typography variant='body1'>Item</Typography>
+                </TableCell>
+                <TableCell width={150}>
+                  {/* This is just for table offset */}
+                  <Typography variant='body1'></Typography>
+                </TableCell>
+                <TableCell align='center'>
+                  <Typography variant='body1'>Colour</Typography>
+                </TableCell>
+                <TableCell align='center'>
+
+                  <Typography variant='body1'>Quantity</Typography>
+                </TableCell>
+                <TableCell align='center'>
+                  <Typography variant='body1'>Unit Price</Typography>
+                </TableCell>
+                <TableCell align='center'>
+                  <Typography variant='body1'>Shipping</Typography>
+                </TableCell>
+                <TableCell align='center'>
+                  <Typography variant='body1'>Tax</Typography>
+                </TableCell>
+                <TableCell align='center'>
+                  <Typography variant='body1'>Duties</Typography>
+                </TableCell>
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {rows.map((row) => (
+                <TableRow
+                  key={row.id}
+                  sx={{
+                    '& td, & th': { border: 0 },
+                    '&:last-child td, &:last-child th': { border: 0 }
+                  }}
+                >
+                  <TableCell component="th" scope="row">
+                    <img
+                      src={row.img_src}
+                      alt={row.img_src}
+                      style={{
+                        width: 100,
+                        height: 100,
+                        aspectRatio: '4 / 4',
+                        objectFit: 'cover',
+                      }}
+                    />
+                  </TableCell>
+                  <TableCell>
+                    <Typography variant='body2' sx={{ fontWeight: "bold", mb: 1 }}>{row.name}</Typography>
+                    <Typography variant='body2'>{row.description}</Typography>
+                  </TableCell>
+                  <TableCell align='center'>
+                    <Typography variant='body1' sx={{ fontWeight: "bold" }} >{row.colour}</Typography>
+                  </TableCell>
+                  <TableCell align='center'>
+                  <Typography variant='body1' sx={{ fontWeight: "bold" }}>{row.quantity}</Typography>
+                  </TableCell>
+                  <TableCell align='center'>
+                    <Typography variant='body1' sx={{ fontWeight: "bold" }}>{`RM ${parseFloat(row.price).toFixed(2)}`}</Typography>
+                  </TableCell>
+                  <TableCell align='center'>
+                    <Typography variant='body1' sx={{ fontWeight: "bold" }}>{`RM ${parseFloat(row.price).toFixed(2)}`}</Typography>
+                  </TableCell>
+                  <TableCell align='center'>
+                    <Typography variant='body1' sx={{ fontWeight: "bold" }}>{`RM ${parseFloat(row.price).toFixed(2)}`}</Typography>
+                  </TableCell>
+                  <TableCell align='center'>
+                    <Typography variant='body1' sx={{ fontWeight: "bold" }}>{`RM ${parseFloat(row.price).toFixed(2)}`}</Typography>
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </TableContainer>
+
+    </Box>
+  );
+};
+
+export default BillingForm;

src/components/BillingForm/index.js

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

src/components/Navbar/Navbar.jsx

@@ -1,20 +1,52 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
 import AppBar from "@mui/material/AppBar";
 import Toolbar from "@mui/material/Toolbar";
 import Typography from "@mui/material/Typography";
 import Button from "@mui/material/Button";
 import IconButton from "@mui/material/IconButton";
 import Box from "@mui/material/Box";
+import Header from "../Header";
 import InputBase from "@mui/material/InputBase";
 import SearchIcon from "@mui/icons-material/Search";
 import AccountCircleIcon from "@mui/icons-material/AccountCircle";
 
 const Navbar = () => {
+  const [showHeader, setShowHeader] = useState(true);
+  const [lastScrollPos, setLastScrollPos] = useState(0);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      const currentScrollPos = window.scrollY;
+
+      if (currentScrollPos > lastScrollPos && currentScrollPos > 50) setShowHeader(false)
+      else setShowHeader(true)
+
+      setLastScrollPos(currentScrollPos);
+    };
+
+    window.addEventListener("scroll", handleScroll);
+
+    return () => {
+      window.removeEventListener("scroll", handleScroll);
+    };
+  }, [lastScrollPos]);
+
   return (
-    <AppBar position="static" sx={{backgroundColor:"background.black"}}>
+    <AppBar position="fixed" sx={{ backgroundColor: "background.black" }}>
+      {/* Conditionally render the Header */}
+      {showHeader && <Header />}
+
       <Toolbar>
         {/* Left Section: Logo */}
-        <Typography variant="h6" sx={{ flexGrow: 0, color:"white", letterSpacing:10, marginLeft:20 }}>
+        <Typography
+          variant="h6"
+          sx={{
+            flexGrow: 0,
+            color: "white",
+            letterSpacing: 10,
+            mx: 20,
+          }}
+        >
           AMBER
         </Typography>
 
@@ -23,18 +55,45 @@ const Navbar = () => {
           sx={{
             flexGrow: 1,
             display: "flex",
-            justifyContent: "center",
             gap: 2,
           }}
         >
-          <Button color="inherit" onClick={()=>{ window.location.href = "/products" }}>DISCOVER</Button>
-          <Button color="inherit" onClick={()=>{ window.location.href = "/" }}>HOME</Button>
-          <Button color="inherit" onClick={()=>{ window.location.href = "/products" }}>BEAUTY</Button>
-          <Button color="inherit" onClick={()=>{ window.location.href = "/products" }}>SALE</Button>
+          <Button
+            color="inherit"
+            onClick={() => {
+              window.location.href = "/products";
+            }}
+          >
+            DISCOVER
+          </Button>
+          <Button
+            color="inherit"
+            onClick={() => {
+              window.location.href = "/";
+            }}
+          >
+            HOME
+          </Button>
+          <Button
+            color="inherit"
+            onClick={() => {
+              window.location.href = "/products";
+            }}
+          >
+            BEAUTY
+          </Button>
+          <Button
+            color="inherit"
+            onClick={() => {
+              window.location.href = "/products";
+            }}
+          >
+            SALE
+          </Button>
         </Box>
 
         {/* Right Section: Search and Profile */}
-        <Box sx={{ display: "flex", alignItems: "center", marginRight:20 }}>
+        <Box sx={{ display: "flex", alignItems: "center", marginRight: 20 }}>
           <Box
             sx={{
               display: "flex",
@@ -53,7 +112,7 @@ const Navbar = () => {
             />
           </Box>
           <IconButton color="inherit">
-            <AccountCircleIcon sx={{color:"white"}}/>
+            <AccountCircleIcon sx={{ color: "white" }} />
           </IconButton>
         </Box>
       </Toolbar>

src/pages/Checkout.jsx

@@ -5,6 +5,7 @@ import Feature from '../components/Feature'
 import LoginForm from '../components/LoginForm'
 import SignUpForm from '../components/SignUpForm'
 import ShippingForm from '../components/ShippingForm'
+import BillingForm from '../components/BillingForm/BillingForm'
 
 import Grid from '@mui/material/Grid2';
 
@@ -80,14 +81,15 @@ const Checkout = () => {
       </Grid>}
 
       {(content == 1) && <Grid container sx={{ mb: 5 }}>
-
         <Grid item size={12}>
-
           <ShippingForm/>
-
         </Grid>
+      </Grid>}
 
-
+      {(content == 2) && <Grid container sx={{ mb: 5 }}>
+        <Grid item size={12}>
+          <BillingForm/>
+        </Grid>
       </Grid>}