amber-fe/src/pages/Checkout.jsx

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 BillingForm from '../components/BillingForm'
import ConfirmOrder from '../components/ConfirmOrder'

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

const Checkout = () => {

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

  return (
    <Box sx={{ px: 24, my: 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={6} sx={{ borderRight: "1px solid rgba(0,0,0,0.2)", borderBottom: "1px solid rgba(0,0,0,0.2)", py: 4, textAlign: "center" }}>

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

        </Grid>

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

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

        </Grid>

        <Grid item size={6} sx={{ borderRight: "1px solid rgba(0,0,0,0.2)", py: 4, textAlign: "center", px: 8 }}>

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

          <LoginForm />

        </Grid>

        <Grid item size={6} sx={{ textAlign: "center", py: 4, px: 8 }}>

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

          <SignUpForm />

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


      <SocialMedia />
      <Feature />

    </Box>
  )
}

export default Checkout