materio-mui-react-nextjs-admin-template-free
Version:
Most Powerful & Comprehensive Free MUI React NextJS Admin Dashboard Template built for developers! 🚀
224 lines (208 loc) • 8.47 kB
JavaScript
// ** React Imports
import { forwardRef, useState } from 'react'
// ** MUI Imports
import Card from '@mui/material/Card'
import Grid from '@mui/material/Grid'
import Button from '@mui/material/Button'
import Divider from '@mui/material/Divider'
import MenuItem from '@mui/material/MenuItem'
import TextField from '@mui/material/TextField'
import CardHeader from '@mui/material/CardHeader'
import InputLabel from '@mui/material/InputLabel'
import IconButton from '@mui/material/IconButton'
import Typography from '@mui/material/Typography'
import CardContent from '@mui/material/CardContent'
import CardActions from '@mui/material/CardActions'
import FormControl from '@mui/material/FormControl'
import OutlinedInput from '@mui/material/OutlinedInput'
import InputAdornment from '@mui/material/InputAdornment'
import Select from '@mui/material/Select'
// ** Third Party Imports
import DatePicker from 'react-datepicker'
// ** Icons Imports
import EyeOutline from 'mdi-material-ui/EyeOutline'
import EyeOffOutline from 'mdi-material-ui/EyeOffOutline'
const CustomInput = forwardRef((props, ref) => {
return <TextField fullWidth {...props} inputRef={ref} label='Birth Date' autoComplete='off' />
})
const FormLayoutsSeparator = () => {
// ** States
const [language, setLanguage] = useState([])
const [date, setDate] = useState(null)
const [values, setValues] = useState({
password: '',
password2: '',
showPassword: false,
showPassword2: false
})
// Handle Password
const handlePasswordChange = prop => event => {
setValues({ ...values, [prop]: event.target.value })
}
const handleClickShowPassword = () => {
setValues({ ...values, showPassword: !values.showPassword })
}
const handleMouseDownPassword = event => {
event.preventDefault()
}
// Handle Confirm Password
const handleConfirmChange = prop => event => {
setValues({ ...values, [prop]: event.target.value })
}
const handleClickShowConfirmPassword = () => {
setValues({ ...values, showPassword2: !values.showPassword2 })
}
const handleMouseDownConfirmPassword = event => {
event.preventDefault()
}
// Handle Select
const handleSelectChange = event => {
setLanguage(event.target.value)
}
return (
<Card>
<CardHeader title='Multi Column with Form Separator' titleTypographyProps={{ variant: 'h6' }} />
<Divider sx={{ margin: 0 }} />
<form onSubmit={e => e.preventDefault()}>
<CardContent>
<Grid container spacing={5}>
<Grid item xs={12}>
<Typography variant='body2' sx={{ fontWeight: 600 }}>
1. Account Details
</Typography>
</Grid>
<Grid item xs={12} sm={6}>
<TextField fullWidth label='Username' placeholder='carterLeonard' />
</Grid>
<Grid item xs={12} sm={6}>
<TextField fullWidth type='email' label='Email' placeholder='carterleonard@gmail.com' />
</Grid>
<Grid item xs={12} sm={6}>
<FormControl fullWidth>
<InputLabel htmlFor='form-layouts-separator-password'>Password</InputLabel>
<OutlinedInput
label='Password'
value={values.password}
id='form-layouts-separator-password'
onChange={handlePasswordChange('password')}
type={values.showPassword ? 'text' : 'password'}
endAdornment={
<InputAdornment position='end'>
<IconButton
edge='end'
onClick={handleClickShowPassword}
onMouseDown={handleMouseDownPassword}
aria-label='toggle password visibility'
>
{values.showPassword ? <EyeOutline /> : <EyeOffOutline />}
</IconButton>
</InputAdornment>
}
/>
</FormControl>
</Grid>
<Grid item xs={12} sm={6}>
<FormControl fullWidth>
<InputLabel htmlFor='form-layouts-separator-password-2'>Confirm Password</InputLabel>
<OutlinedInput
value={values.password2}
label='Confirm Password'
id='form-layouts-separator-password-2'
onChange={handleConfirmChange('password2')}
type={values.showPassword2 ? 'text' : 'password'}
endAdornment={
<InputAdornment position='end'>
<IconButton
edge='end'
aria-label='toggle password visibility'
onClick={handleClickShowConfirmPassword}
onMouseDown={handleMouseDownConfirmPassword}
>
{values.showPassword2 ? <EyeOutline /> : <EyeOffOutline />}
</IconButton>
</InputAdornment>
}
/>
</FormControl>
</Grid>
<Grid item xs={12}>
<Divider sx={{ marginBottom: 0 }} />
</Grid>
<Grid item xs={12}>
<Typography variant='body2' sx={{ fontWeight: 600 }}>
2. Personal Info
</Typography>
</Grid>
<Grid item xs={12} sm={6}>
<TextField fullWidth label='First Name' placeholder='Leonard' />
</Grid>
<Grid item xs={12} sm={6}>
<TextField fullWidth label='Last Name' placeholder='Carter' />
</Grid>
<Grid item xs={12} sm={6}>
<FormControl fullWidth>
<InputLabel id='form-layouts-separator-select-label'>Country</InputLabel>
<Select
label='Country'
defaultValue=''
id='form-layouts-separator-select'
labelId='form-layouts-separator-select-label'
>
<MenuItem value='UK'>UK</MenuItem>
<MenuItem value='USA'>USA</MenuItem>
<MenuItem value='Australia'>Australia</MenuItem>
<MenuItem value='Germany'>Germany</MenuItem>
</Select>
</FormControl>
</Grid>
<Grid item xs={12} sm={6}>
<FormControl fullWidth>
<InputLabel id='form-layouts-separator-multiple-select-label'>Language</InputLabel>
<Select
multiple
value={language}
onChange={handleSelectChange}
id='form-layouts-separator-multiple-select'
labelId='form-layouts-separator-multiple-select-label'
input={<OutlinedInput label='Language' id='select-multiple-language' />}
>
<MenuItem value='English'>English</MenuItem>
<MenuItem value='French'>French</MenuItem>
<MenuItem value='Spanish'>Spanish</MenuItem>
<MenuItem value='Portuguese'>Portuguese</MenuItem>
<MenuItem value='Italian'>Italian</MenuItem>
<MenuItem value='German'>German</MenuItem>
<MenuItem value='Arabic'>Arabic</MenuItem>
</Select>
</FormControl>
</Grid>
<Grid item xs={12} sm={6}>
<DatePicker
selected={date}
showYearDropdown
showMonthDropdown
placeholderText='MM-DD-YYYY'
customInput={<CustomInput />}
id='form-layouts-separator-date'
onChange={date => setDate(date)}
/>
</Grid>
<Grid item xs={12} sm={6}>
<TextField fullWidth label='Phone No.' placeholder='+1-123-456-8790' />
</Grid>
</Grid>
</CardContent>
<Divider sx={{ margin: 0 }} />
<CardActions>
<Button size='large' type='submit' sx={{ mr: 2 }} variant='contained'>
Submit
</Button>
<Button size='large' color='secondary' variant='outlined'>
Cancel
</Button>
</CardActions>
</form>
</Card>
)
}
export default FormLayoutsSeparator