initial commit

2025-08-05 12:35:40 +07:00
commit fffa2ead5c
1069 changed files with 118056 additions and 0 deletions
@@ -0,0 +1,121 @@
+'use client'
+
+// React Imports
+import { useState } from 'react'
+
+// Next Imports
+import Link from 'next/link'
+
+// MUI Imports
+import Card from '@mui/material/Card'
+import Grid from '@mui/material/Grid2'
+import Button from '@mui/material/Button'
+import Typography from '@mui/material/Typography'
+import CardHeader from '@mui/material/CardHeader'
+import CardContent from '@mui/material/CardContent'
+import IconButton from '@mui/material/IconButton'
+import InputAdornment from '@mui/material/InputAdornment'
+
+// Components Imports
+import CustomTextField from '@core/components/mui/TextField'
+
+const FormLayoutsBasic = () => {
+  // States
+  const [isPasswordShown, setIsPasswordShown] = useState(false)
+  const [isConfirmPasswordShown, setIsConfirmPasswordShown] = useState(false)
+
+  const handleClickShowPassword = () => setIsPasswordShown(show => !show)
+
+  const handleClickShowConfirmPassword = () => setIsConfirmPasswordShown(show => !show)
+
+  return (
+    <Card>
+      <CardHeader title='Basic' />
+      <CardContent>
+        <form onSubmit={e => e.preventDefault()}>
+          <Grid container spacing={6}>
+            <Grid size={{ xs: 12 }}>
+              <CustomTextField fullWidth label='Name' placeholder='John Doe' />
+            </Grid>
+            <Grid size={{ xs: 12 }}>
+              <CustomTextField
+                fullWidth
+                type='email'
+                label='Email'
+                placeholder='johndoe@gmail.com'
+                helperText='You can use letters, numbers & periods'
+              />
+            </Grid>
+            <Grid size={{ xs: 12 }}>
+              <CustomTextField
+                fullWidth
+                label='Password'
+                placeholder='············'
+                id='form-layout-basic-password'
+                type={isPasswordShown ? 'text' : 'password'}
+                helperText='Use 8 or more characters with a mix of letters, numbers & symbols'
+                slotProps={{
+                  input: {
+                    endAdornment: (
+                      <InputAdornment position='end'>
+                        <IconButton
+                          edge='end'
+                          onClick={handleClickShowPassword}
+                          onMouseDown={e => e.preventDefault()}
+                          aria-label='toggle password visibility'
+                        >
+                          <i className={isPasswordShown ? 'tabler-eye-off' : 'tabler-eye'} />
+                        </IconButton>
+                      </InputAdornment>
+                    )
+                  }
+                }}
+              />
+            </Grid>
+            <Grid size={{ xs: 12 }}>
+              <CustomTextField
+                fullWidth
+                label='Confirm Password'
+                placeholder='············'
+                id='form-layout-basic-confirm-password'
+                type={isConfirmPasswordShown ? 'text' : 'password'}
+                helperText='Make sure to type the same password as above'
+                slotProps={{
+                  input: {
+                    endAdornment: (
+                      <InputAdornment position='end'>
+                        <IconButton
+                          edge='end'
+                          onClick={handleClickShowConfirmPassword}
+                          onMouseDown={e => e.preventDefault()}
+                          aria-label='toggle confirm password visibility'
+                        >
+                          <i className={isConfirmPasswordShown ? 'tabler-eye-off' : 'tabler-eye'} />
+                        </IconButton>
+                      </InputAdornment>
+                    )
+                  }
+                }}
+              />
+            </Grid>
+            <Grid size={{ xs: 12 }}>
+              <div className='flex items-center justify-between flex-wrap gap-5'>
+                <Button variant='contained' type='submit'>
+                  Get Started!
+                </Button>
+                <div className='flex items-center justify-center gap-2'>
+                  <Typography>Already have an account?</Typography>
+                  <Link href='/' onClick={e => e.preventDefault()} className='text-primary'>
+                    Log In
+                  </Link>
+                </div>
+              </div>
+            </Grid>
+          </Grid>
+        </form>
+      </CardContent>
+    </Card>
+  )
+}
+
+export default FormLayoutsBasic