Dev #16
114
ui/package-lock.json
generated
114
ui/package-lock.json
generated
@@ -17,9 +17,11 @@
|
||||
"@mui/material-nextjs": "^7.1.1",
|
||||
"@mui/system": "^7.1.1",
|
||||
"axios": "^1.10.0",
|
||||
"formik": "^2.4.6",
|
||||
"next": "15.3.4",
|
||||
"react": "^19.0.0",
|
||||
"react-dom": "^19.0.0"
|
||||
"react-dom": "^19.0.0",
|
||||
"yup": "^1.6.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/eslintrc": "^3",
|
||||
@@ -1918,6 +1920,16 @@
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/hoist-non-react-statics": {
|
||||
"version": "3.3.6",
|
||||
"resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.6.tgz",
|
||||
"integrity": "sha512-lPByRJUer/iN/xa4qpyL0qmL11DqNW81iU/IG1S3uvRUq4oKagz8VCxZjiWkumgt66YT3vOdDgZ0o32sGKtCEw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@types/react": "*",
|
||||
"hoist-non-react-statics": "^3.3.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/json-schema": {
|
||||
"version": "7.0.15",
|
||||
"resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
|
||||
@@ -3210,6 +3222,15 @@
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/deepmerge": {
|
||||
"version": "2.2.1",
|
||||
"resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-2.2.1.tgz",
|
||||
"integrity": "sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/define-data-property": {
|
||||
"version": "1.1.4",
|
||||
"resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz",
|
||||
@@ -4141,6 +4162,31 @@
|
||||
"node": ">= 6"
|
||||
}
|
||||
},
|
||||
"node_modules/formik": {
|
||||
"version": "2.4.6",
|
||||
"resolved": "https://registry.npmjs.org/formik/-/formik-2.4.6.tgz",
|
||||
"integrity": "sha512-A+2EI7U7aG296q2TLGvNapDNTZp1khVt5Vk0Q/fyfSROss0V/V6+txt2aJnwEos44IxTCW/LYAi/zgWzlevj+g==",
|
||||
"funding": [
|
||||
{
|
||||
"type": "individual",
|
||||
"url": "https://opencollective.com/formik"
|
||||
}
|
||||
],
|
||||
"license": "Apache-2.0",
|
||||
"dependencies": {
|
||||
"@types/hoist-non-react-statics": "^3.3.1",
|
||||
"deepmerge": "^2.1.1",
|
||||
"hoist-non-react-statics": "^3.3.0",
|
||||
"lodash": "^4.17.21",
|
||||
"lodash-es": "^4.17.21",
|
||||
"react-fast-compare": "^2.0.1",
|
||||
"tiny-warning": "^1.0.2",
|
||||
"tslib": "^2.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=16.8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/function-bind": {
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
|
||||
@@ -5319,6 +5365,18 @@
|
||||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/lodash": {
|
||||
"version": "4.17.21",
|
||||
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
|
||||
"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/lodash-es": {
|
||||
"version": "4.17.21",
|
||||
"resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
|
||||
"integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/lodash.merge": {
|
||||
"version": "4.6.2",
|
||||
"resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
|
||||
@@ -5936,6 +5994,12 @@
|
||||
"react-is": "^16.13.1"
|
||||
}
|
||||
},
|
||||
"node_modules/property-expr": {
|
||||
"version": "2.0.6",
|
||||
"resolved": "https://registry.npmjs.org/property-expr/-/property-expr-2.0.6.tgz",
|
||||
"integrity": "sha512-SVtmxhRE/CGkn3eZY1T6pC8Nln6Fr/lu1mKSgRud0eC73whjGfoAogbn78LkD8aFL0zz3bAFerKSnOl7NlErBA==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/proxy-from-env": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
|
||||
@@ -5994,6 +6058,12 @@
|
||||
"react": "^19.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-fast-compare": {
|
||||
"version": "2.0.4",
|
||||
"resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz",
|
||||
"integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/react-is": {
|
||||
"version": "16.13.1",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
|
||||
@@ -6693,6 +6763,18 @@
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"node_modules/tiny-case": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/tiny-case/-/tiny-case-1.0.3.tgz",
|
||||
"integrity": "sha512-Eet/eeMhkO6TX8mnUteS9zgPbUMQa4I6Kkp5ORiBD5476/m+PIRiumP5tmh5ioJpH7k51Kehawy2UDfsnxxY8Q==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/tiny-warning": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
|
||||
"integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/tinyglobby": {
|
||||
"version": "0.2.14",
|
||||
"resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.14.tgz",
|
||||
@@ -6751,6 +6833,12 @@
|
||||
"node": ">=8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/toposort": {
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npmjs.org/toposort/-/toposort-2.0.2.tgz",
|
||||
"integrity": "sha512-0a5EOkAUp8D4moMi2W8ZF8jcga7BgZd91O/yabJCFY8az+XSzeGyTKs0Aoo897iV1Nj6guFq8orWDS96z91oGg==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/ts-api-utils": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-2.1.0.tgz",
|
||||
@@ -6796,6 +6884,18 @@
|
||||
"node": ">= 0.8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/type-fest": {
|
||||
"version": "2.19.0",
|
||||
"resolved": "https://registry.npmjs.org/type-fest/-/type-fest-2.19.0.tgz",
|
||||
"integrity": "sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==",
|
||||
"license": "(MIT OR CC0-1.0)",
|
||||
"engines": {
|
||||
"node": ">=12.20"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/typed-array-buffer": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/typed-array-buffer/-/typed-array-buffer-1.0.3.tgz",
|
||||
@@ -7114,6 +7214,18 @@
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/yup": {
|
||||
"version": "1.6.1",
|
||||
"resolved": "https://registry.npmjs.org/yup/-/yup-1.6.1.tgz",
|
||||
"integrity": "sha512-JED8pB50qbA4FOkDol0bYF/p60qSEDQqBD0/qeIrUCG1KbPBIQ776fCUNb9ldbPcSTxA69g/47XTo4TqWiuXOA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"property-expr": "^2.0.5",
|
||||
"tiny-case": "^1.0.3",
|
||||
"toposort": "^2.0.2",
|
||||
"type-fest": "^2.19.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -18,9 +18,11 @@
|
||||
"@mui/material-nextjs": "^7.1.1",
|
||||
"@mui/system": "^7.1.1",
|
||||
"axios": "^1.10.0",
|
||||
"formik": "^2.4.6",
|
||||
"next": "15.3.4",
|
||||
"react": "^19.0.0",
|
||||
"react-dom": "^19.0.0"
|
||||
"react-dom": "^19.0.0",
|
||||
"yup": "^1.6.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/eslintrc": "^3",
|
||||
|
||||
@@ -0,0 +1,392 @@
|
||||
'use client';
|
||||
|
||||
import React from 'react';
|
||||
import {
|
||||
Box,
|
||||
Card,
|
||||
CardContent,
|
||||
TextField,
|
||||
Button,
|
||||
Typography,
|
||||
Grid,
|
||||
MenuItem,
|
||||
FormControl,
|
||||
InputLabel,
|
||||
Select,
|
||||
FormHelperText,
|
||||
Chip,
|
||||
Avatar,
|
||||
Container,
|
||||
SelectChangeEvent,
|
||||
} from '@mui/material';
|
||||
import { useFormik, FormikHelpers } from 'formik';
|
||||
import * as yup from 'yup';
|
||||
import PersonIcon from '@mui/icons-material/Person';
|
||||
import EmailIcon from '@mui/icons-material/Email';
|
||||
import PhoneIcon from '@mui/icons-material/Phone';
|
||||
import WorkIcon from '@mui/icons-material/Work';
|
||||
import SendIcon from '@mui/icons-material/Send';
|
||||
|
||||
interface FormValues {
|
||||
firstName: string;
|
||||
lastName: string;
|
||||
email: string;
|
||||
phone: string;
|
||||
age: string | number;
|
||||
department: string;
|
||||
skills: string[];
|
||||
bio: string;
|
||||
}
|
||||
|
||||
const validationSchema = yup.object<FormValues>({
|
||||
firstName: yup
|
||||
.string()
|
||||
.min(2, 'First name should be at least 2 characters')
|
||||
.required('First name is required'),
|
||||
lastName: yup
|
||||
.string()
|
||||
.min(2, 'Last name should be at least 2 characters')
|
||||
.required('Last name is required'),
|
||||
email: yup
|
||||
.string()
|
||||
.email('Enter a valid email')
|
||||
.required('Email is required'),
|
||||
phone: yup
|
||||
.string()
|
||||
.matches(/^[\+]?[1-9][\d]{0,15}$/, 'Enter a valid phone number')
|
||||
.required('Phone number is required'),
|
||||
age: yup
|
||||
.number()
|
||||
.min(18, 'Must be at least 18 years old')
|
||||
.max(120, 'Must be less than 120 years old')
|
||||
.required('Age is required'),
|
||||
department: yup
|
||||
.string()
|
||||
.required('Department is required'),
|
||||
skills: yup
|
||||
.array()
|
||||
.of(yup.string())
|
||||
.min(1, 'Select at least one skill')
|
||||
.required('Skills are required'),
|
||||
bio: yup
|
||||
.string()
|
||||
.min(10, 'Bio should be at least 10 characters')
|
||||
.max(500, 'Bio should not exceed 500 characters')
|
||||
.required('Bio is required'),
|
||||
});
|
||||
|
||||
|
||||
const departments: string[] = [
|
||||
'Engineering',
|
||||
'Marketing',
|
||||
'Sales',
|
||||
'HR',
|
||||
'Finance',
|
||||
'Operations',
|
||||
'Design',
|
||||
];
|
||||
|
||||
const skillOptions: string[] = [
|
||||
'JavaScript',
|
||||
'React',
|
||||
'Node.js',
|
||||
'Python',
|
||||
'UI/UX Design',
|
||||
'Project Management',
|
||||
'Data Analysis',
|
||||
'Marketing',
|
||||
'Sales',
|
||||
'Communication',
|
||||
];
|
||||
|
||||
const FormPage: React.FC = () => {
|
||||
const formik = useFormik<FormValues>({
|
||||
initialValues: {
|
||||
firstName: '',
|
||||
lastName: '',
|
||||
email: '',
|
||||
phone: '',
|
||||
age: '',
|
||||
department: '',
|
||||
skills: [],
|
||||
bio: '',
|
||||
},
|
||||
validationSchema: validationSchema,
|
||||
onSubmit: (values: FormValues, { setSubmitting, resetForm }: FormikHelpers<FormValues>) => {
|
||||
setTimeout(() => {
|
||||
console.log('Form submitted:', values);
|
||||
alert('Form submitted successfully!');
|
||||
setSubmitting(false);
|
||||
resetForm();
|
||||
}, 1000);
|
||||
},
|
||||
});
|
||||
|
||||
const handleSkillChange = (event: SelectChangeEvent<string[]>): void => {
|
||||
const value = event.target.value;
|
||||
formik.setFieldValue('skills', typeof value === 'string' ? value.split(',') : value);
|
||||
};
|
||||
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
minHeight: '100vh',
|
||||
background: (theme) =>
|
||||
theme.palette.mode === 'dark'
|
||||
? 'linear-gradient(135deg, #0f0f23 0%, #1a1a2e 50%, #16213e 100%)'
|
||||
: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
|
||||
py: 4,
|
||||
}}
|
||||
>
|
||||
<Container maxWidth="sm">
|
||||
<Card
|
||||
elevation={8}
|
||||
sx={{
|
||||
borderRadius: 3,
|
||||
background: (theme) =>
|
||||
theme.palette.mode === 'dark'
|
||||
? 'rgba(26, 26, 46, 0.95)'
|
||||
: 'rgba(255, 255, 255, 0.95)',
|
||||
backdropFilter: 'blur(10px)',
|
||||
border: (theme) =>
|
||||
theme.palette.mode === 'dark'
|
||||
? '1px solid rgba(99, 102, 241, 0.2)'
|
||||
: '1px solid rgba(255, 255, 255, 0.3)',
|
||||
}}
|
||||
>
|
||||
<CardContent sx={{ p: 4 }}>
|
||||
<Box
|
||||
display="flex"
|
||||
flexDirection="column"
|
||||
alignItems="center"
|
||||
mb={4}
|
||||
>
|
||||
<Avatar
|
||||
sx={{
|
||||
bgcolor: 'primary.main',
|
||||
width: 56,
|
||||
height: 56,
|
||||
mb: 2,
|
||||
}}
|
||||
>
|
||||
<PersonIcon fontSize="large" />
|
||||
</Avatar>
|
||||
<Typography
|
||||
variant="h4"
|
||||
component="h1"
|
||||
fontWeight="bold"
|
||||
color="primary"
|
||||
textAlign="center"
|
||||
>
|
||||
User Registration
|
||||
</Typography>
|
||||
<Typography variant="subtitle1" color="text.secondary" textAlign="center">
|
||||
Please fill out all required fields
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<form onSubmit={formik.handleSubmit}>
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
|
||||
<Typography variant="h6" color="primary" sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
||||
<PersonIcon /> Personal Information
|
||||
</Typography>
|
||||
|
||||
<Grid container spacing={2}>
|
||||
<Grid size={{ xs: 6 }}>
|
||||
<TextField
|
||||
fullWidth
|
||||
id="firstName"
|
||||
name="firstName"
|
||||
label="First Name"
|
||||
value={formik.values.firstName}
|
||||
onChange={formik.handleChange}
|
||||
onBlur={formik.handleBlur}
|
||||
error={formik.touched.firstName && Boolean(formik.errors.firstName)}
|
||||
helperText={formik.touched.firstName && formik.errors.firstName}
|
||||
variant="outlined"
|
||||
/>
|
||||
</Grid>
|
||||
<Grid size={{ xs: 6 }}>
|
||||
<TextField
|
||||
fullWidth
|
||||
id="lastName"
|
||||
name="lastName"
|
||||
label="Last Name"
|
||||
value={formik.values.lastName}
|
||||
onChange={formik.handleChange}
|
||||
onBlur={formik.handleBlur}
|
||||
error={formik.touched.lastName && Boolean(formik.errors.lastName)}
|
||||
helperText={formik.touched.lastName && formik.errors.lastName}
|
||||
variant="outlined"
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
<TextField
|
||||
fullWidth
|
||||
id="email"
|
||||
name="email"
|
||||
label="Email Address"
|
||||
type="email"
|
||||
value={formik.values.email}
|
||||
onChange={formik.handleChange}
|
||||
onBlur={formik.handleBlur}
|
||||
error={formik.touched.email && Boolean(formik.errors.email)}
|
||||
helperText={formik.touched.email && formik.errors.email}
|
||||
variant="outlined"
|
||||
InputProps={{
|
||||
startAdornment: <EmailIcon sx={{ color: 'action.active', mr: 1 }} />,
|
||||
}}
|
||||
/>
|
||||
|
||||
<TextField
|
||||
fullWidth
|
||||
id="phone"
|
||||
name="phone"
|
||||
label="Phone Number"
|
||||
value={formik.values.phone}
|
||||
onChange={formik.handleChange}
|
||||
onBlur={formik.handleBlur}
|
||||
error={formik.touched.phone && Boolean(formik.errors.phone)}
|
||||
helperText={formik.touched.phone && formik.errors.phone}
|
||||
variant="outlined"
|
||||
InputProps={{
|
||||
startAdornment: <PhoneIcon sx={{ color: 'action.active', mr: 1 }} />,
|
||||
}}
|
||||
/>
|
||||
|
||||
<TextField
|
||||
fullWidth
|
||||
id="age"
|
||||
name="age"
|
||||
label="Age"
|
||||
type="number"
|
||||
value={formik.values.age}
|
||||
onChange={formik.handleChange}
|
||||
onBlur={formik.handleBlur}
|
||||
error={formik.touched.age && Boolean(formik.errors.age)}
|
||||
helperText={formik.touched.age && formik.errors.age}
|
||||
variant="outlined"
|
||||
/>
|
||||
|
||||
<Typography variant="h6" color="primary" sx={{ display: 'flex', alignItems: 'center', gap: 1, mt: 2 }}>
|
||||
<WorkIcon /> Professional Information
|
||||
</Typography>
|
||||
|
||||
<FormControl
|
||||
fullWidth
|
||||
error={formik.touched.department && Boolean(formik.errors.department)}
|
||||
>
|
||||
<InputLabel id="department-label">Department</InputLabel>
|
||||
<Select
|
||||
labelId="department-label"
|
||||
id="department"
|
||||
name="department"
|
||||
value={formik.values.department}
|
||||
label="Department"
|
||||
onChange={formik.handleChange}
|
||||
onBlur={formik.handleBlur}
|
||||
>
|
||||
{departments.map((dept: string) => (
|
||||
<MenuItem key={dept} value={dept}>
|
||||
{dept}
|
||||
</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
{formik.touched.department && formik.errors.department && (
|
||||
<FormHelperText>{formik.errors.department}</FormHelperText>
|
||||
)}
|
||||
</FormControl>
|
||||
|
||||
<FormControl
|
||||
fullWidth
|
||||
error={formik.touched.skills && Boolean(formik.errors.skills)}
|
||||
>
|
||||
<InputLabel id="skills-label">Skills</InputLabel>
|
||||
<Select
|
||||
labelId="skills-label"
|
||||
id="skills"
|
||||
multiple
|
||||
value={formik.values.skills}
|
||||
onChange={handleSkillChange}
|
||||
onBlur={formik.handleBlur}
|
||||
label="Skills"
|
||||
renderValue={(selected: string[]) => (
|
||||
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}>
|
||||
{selected.map((value: string) => (
|
||||
<Chip key={value} label={value} size="small" />
|
||||
))}
|
||||
</Box>
|
||||
)}
|
||||
>
|
||||
{skillOptions.map((skill: string) => (
|
||||
<MenuItem key={skill} value={skill}>
|
||||
{skill}
|
||||
</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
{formik.touched.skills && formik.errors.skills && (
|
||||
<FormHelperText>{formik.errors.skills}</FormHelperText>
|
||||
)}
|
||||
</FormControl>
|
||||
|
||||
<TextField
|
||||
fullWidth
|
||||
id="bio"
|
||||
name="bio"
|
||||
label="Bio"
|
||||
multiline
|
||||
rows={4}
|
||||
value={formik.values.bio}
|
||||
onChange={formik.handleChange}
|
||||
onBlur={formik.handleBlur}
|
||||
error={formik.touched.bio && Boolean(formik.errors.bio)}
|
||||
helperText={
|
||||
formik.touched.bio && formik.errors.bio
|
||||
? formik.errors.bio
|
||||
: `${formik.values.bio.length}/500 characters`
|
||||
}
|
||||
variant="outlined"
|
||||
placeholder="Tell us about yourself..."
|
||||
/>
|
||||
|
||||
<Button
|
||||
color="primary"
|
||||
variant="contained"
|
||||
fullWidth
|
||||
size="large"
|
||||
type="submit"
|
||||
disabled={formik.isSubmitting}
|
||||
startIcon={<SendIcon />}
|
||||
sx={{
|
||||
mt: 2,
|
||||
py: 1.5,
|
||||
borderRadius: 3,
|
||||
background: (theme) =>
|
||||
theme.palette.mode === 'dark'
|
||||
? 'linear-gradient(45deg, #6366f1 30%, #8b5cf6 90%)'
|
||||
: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
|
||||
boxShadow: (theme) =>
|
||||
theme.palette.mode === 'dark'
|
||||
? '0 3px 5px 2px rgba(99, 102, 241, .3)'
|
||||
: '0 3px 5px 2px rgba(255, 105, 135, .3)',
|
||||
'&:hover': {
|
||||
background: (theme) =>
|
||||
theme.palette.mode === 'dark'
|
||||
? 'linear-gradient(45deg, #5b21b6 60%, #7c3aed 100%)'
|
||||
: 'linear-gradient(45deg, #FE6B8B 60%, #FF8E53 100%)',
|
||||
},
|
||||
}}
|
||||
>
|
||||
{formik.isSubmitting ? 'Submitting...' : 'Submit Registration'}
|
||||
</Button>
|
||||
</Box>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Container>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default FormPage;
|
||||
Reference in New Issue
Block a user