Styled Paper - Copy this React, Mui Component to your project

import { useState } from "react" import { Button, TextField, Typography, Box, Paper } from "@mui/material" import { useNavigate } from 'react-router-dom' import { SERVER_ENDPOINT } from "../config" interface AuthProps { isSignInPage?: boolean } const Auth: React.FC<AuthProps> = ({ isSignInPage = true }) => { const [data, setData] = useState({ ...(isSignInPage ? {} : { fullName: '' }), email: '', password: '' }) const navigate = useNavigate() const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() const res = await fetch(`${SERVER_ENDPOINT}/api/${isSignInPage ? 'login' : 'register'}`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(data) }) if (res.status === 400) { alert('Invalid credentials') } else { const resData = await res.json() if (resData.token) { localStorage.setItem('user:token', resData.token) localStorage.setItem('user:detail', JSON.stringify(resData.user)) navigate('/') } } } return ( <Box sx={{ backgroundColor: 'lightgray', // Equivalent to 'bg-light' height: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center', }} > <Paper sx={{ width: 600, height: 800, boxShadow: 3, borderRadius: 2, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', padding: 3, // Adding some padding inside Paper }} > <Typography variant="h3" sx={{ fontWeight: 'bold' }}> Welcome {isSignInPage ? 'Back' : 'to the App'} </Typography> <Typography variant="h6" sx={{ fontWeight: 'light', marginBottom: 3 }}> {isSignInPage ? 'Sign in to get started' : 'Sign up to get started'} </Typography> <form style={{ width: '100%' }} onSubmit={handleSubmit}> {/* Full name field - Only shown if it's the sign-up page */} {!isSignInPage && ( <TextField label="Full name" name="fullName" placeholder="Enter your full name" value={data.fullName} onChange={(e) => setData({ ...data, fullName: e.target.value })} fullWidth sx={{ marginBottom: 2 }} // Adjust spacing /> )} <TextField label="Email address" type="email" name="email" placeholder="Enter your email" value={data.email} onChange={(e) => setData({ ...data, email: e.target.value })} fullWidth sx={{ marginBottom: 2 }} // Adjust spacing /> <TextField label="Password" type="password" name="password" placeholder="Enter your password" value={data.password} onChange={(e) => setData({ ...data, password: e.target.value })} fullWidth sx={{ marginBottom: 3 }} // Adjust spacing /> <Button variant="contained" color="primary" type="submit" fullWidth sx={{ marginBottom: 1 }} > {isSignInPage ? 'Sign in' : 'Sign up'} </Button> </form> <Typography variant="body2"> {isSignInPage ? "Don't have an account?" : 'Already have an account?'}{' '} <span style={{ cursor: 'pointer', textDecoration: 'underline', color: '#1976d2' }} onClick={() => navigate(`/users/${isSignInPage ? 'sign_up' : 'sign_in'}`)} > {isSignInPage ? 'Sign up' : 'Sign in'} </span> </Typography> </Paper> </Box> ) } export default Auth