amber/src/pages/Checkout.jsx

import React, { useState } from 'react'
import { Box, Typography, Link } 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 BillingForm from '../components/BillingForm'
import ConfirmOrder from '../components/ConfirmOrder'

import Grid from '@mui/material/Grid2';

const Checkout = () => {

  const [content, setContent] = useState(0);
  const [showLoginForm, setShowLoginForm] = useState(true);

  return (
    <Box sx={{
      px: {
        xs: 2,
        md: 5,
        lg: 5
      },
      mb: {
        xs: 0,
        md: 5,
        lg: 10
      },
      mt: 10
    }}>

      {/* Header */}
      <Grid container spacing={2} sx={{ mb: 5 }}>

        <Grid item size={4} sx={{ mx: "auto" }}>
          <Typography variant="h5" sx={{ fontWeight: "bold", textAlign: "center" }}>
            {[
              'LOGIN',
              'SHIPPING',
              'BILLING',
              'CONFIRMATION'
            ][content]}
          </Typography>
        </Grid>

      </Grid>

      {/* Navigation */}
      <Grid container>

        <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>

        </Grid>

      </Grid>

      {/* Content */}
      {(content == 0) && <Grid container sx={{ mb: 5 }}>

        <Grid item size={{ xs: 12, md: 6 }} sx={{ borderRight: "1px solid rgba(0,0,0,0.2)", borderBottom: "1px solid rgba(0,0,0,0.2)", py: 4, textAlign: "center", display: { xs: "none", md: "block" } }}>

          <Typography variant="body1" sx={{ fontWeight: "500" }}>EXISTING CUSTOMER</Typography>

        </Grid>

        <Grid item size={{ xs: 12, md: 6 }} sx={{ textAlign: "center", py: 4, borderBottom: "1px solid rgba(0,0,0,0.2)", display: { xs: "none", md: "block" } }}>

          <Typography variant="body1" sx={{ fontWeight: "500" }}>NEW CUSTOMER</Typography>

        </Grid>

        <Grid
          item
          size={{ xs: 12, md: 6 }}
          sx={{
            borderRight: { xs: "none", md: "1px solid rgba(0,0,0,0.2)" },
            py: 4,
            textAlign: "center",
            px: 8,
            display: {
              xs: showLoginForm ? "block" : "none",
              md: "block"
            }
          }}>

          <Typography variant="h6" sx={{ fontWeight: "500", mb: 3, display: { xs: "block", md: "none" } }}>EXISTING CUSTOMER</Typography>

          <Typography variant="body2">Make purchases faster using previously saved details. Track previous orders and easily request returns from the website.</Typography>

          <LoginForm />

          <Typography variant="body1" sx={{ fontWeight: "400", mt: 5, display: { xs: "block", md: "none" } }}>Didnt have any Account? <Link onClick={() => { setShowLoginForm(false) }} sx={{ textDecoration: "underline" }}> here</Link> to subcribe now.</Typography>


        </Grid>

        <Grid
          item
          size={{ xs: 12, md: 6 }}
          sx={{
            textAlign: "center",
            py: 4,
            px: 8,
            display: {
              xs: showLoginForm ? "none" : "block",
              md: "block"
            }
          }}>

          <Typography variant="h6" sx={{ fontWeight: "500", mb: 3, display: { xs: "block", md: "none" } }}>NEW CUSTOMER</Typography>

          <Typography variant="body2">You’ll need an account to purchase watches, track and review orders, and manage your personal details.</Typography>

          <SignUpForm />

          <Typography variant="body1" sx={{ fontWeight: "400", mt: 5, display: { xs: "block", md: "none" } }}>Already have an Account? <Link onClick={() => { setShowLoginForm(true) }} sx={{ textDecoration: "underline" }}> here</Link> to subcribe now.</Typography>

        </Grid>


      </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>}

      {(content == 3) && <Grid container sx={{ mb: 5 }}>
        <Grid item size={12}>
          <ConfirmOrder />
        </Grid>
      </Grid>}


      <Box sx={{display: {xs:"none", md:"block"}  }}>
        <SocialMedia />
        <Feature />
      </Box>

    </Box>
  )
}

export default Checkout