Admin Login - Copy this React, Mui Component to your project

import React from 'react'; import { styled } from '@mui/system'; import { BrowserRouter as Router, Link } from 'react-router-dom'; import { TextField, Button, Typography } from '@mui/material'; const LoginBoardContainer = styled('div')({ display: 'flex', flexDirection: 'column', alignItems: 'center', padding: '2rem', border: '1px solid #ccc', borderRadius: '0.5rem', boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)', }); const LoginForm = styled('form')({ display: 'flex', flexDirection: 'column', width: '100%', }); const InputField = styled(TextField)({ marginBottom: '1rem', }); const LoginButton = styled(Button)({ marginTop: '1rem', }); const LoginLink = styled(Link)({ textDecoration: 'none', color: '#007bff', marginTop: '1rem', '&:hover': { textDecoration: 'underline', }, }); const LoginBoard = () => { const [username, setUsername] = React.useState(''); const [password, setPassword] = React.useState(''); const handleSubmit = (event) => { event.preventDefault(); // Handle login logic here }; return ( <LoginBoardContainer> <Typography variant="h4" component="h1"> Admin Login </Typography> <LoginForm onSubmit={handleSubmit}> <InputField label="Username" variant="outlined" value={username} onChange={(e) => setUsername(e.target.value)} fullWidth required /> <InputField label="Password" variant="outlined" type="password" value={password} onChange={(e) => setPassword(e.target.value)} fullWidth required /> <LoginButton type="submit" variant="contained" color="primary" fullWidth> Login </LoginButton> </LoginForm> <LoginLink to="/">Back to Home</LoginLink> </LoginBoardContainer> ); }; const App = () => { return ( <Router> <LoginBoard /> </Router> ); }; export default App;