4d2a577b0e
* chore: update deps * chore: update deps for apps/docs * chore: update landing-page deps * chore: update monorepo deps * chore: add astro as dep to config * chore: update package lock * fix: tailwind import on landing-page * chore: type module * chore: remove ci run for node 16 * chore: ci run ci * chore: remove astro check from ci * chore: remove lint check from ci * fix: tailwindcss import * fix: check errors on apps * chore: fix npm run check * chore: updat emonorepo deps * chore: not a module * chore: use astro-iconify instead * chore: update prettier * chore: use prettier formatter * chore: update lint deps * chore: run lint on ci * chore: add changeset
112 lines
2.1 KiB
Text
112 lines
2.1 KiB
Text
---
|
|
import Form, { FormControl, FormGroup } from '@astro-reactive/form';
|
|
import type { ControlConfig } from '@astro-reactive/form';
|
|
import { Validators } from '@astro-reactive/validator';
|
|
import type { Submit } from '@astro-reactive/common';
|
|
import Layout from '../components/Layout.astro';
|
|
|
|
const infoForm = new FormGroup([
|
|
{
|
|
name: 'firstName',
|
|
label: 'First Name',
|
|
placeholder: 'ex. John',
|
|
validators: [Validators.required],
|
|
},
|
|
{
|
|
name: 'lastName',
|
|
label: 'Last Name',
|
|
placeholder: 'ex. Doe',
|
|
validators: [Validators.required],
|
|
},
|
|
{
|
|
name: 'email',
|
|
label: 'Email',
|
|
placeholder: 'ex. john.doe@email.com',
|
|
validators: [Validators.email, Validators.required],
|
|
},
|
|
{
|
|
name: 'whyHire',
|
|
label: 'Why should we hire you?',
|
|
},
|
|
{
|
|
name: 'country',
|
|
label: 'Country of Residence',
|
|
type: 'dropdown',
|
|
options: ['U.S.A', 'Canada', 'Mexico', 'Cuba', 'Guatamala', 'Greenland', 'Haiti'],
|
|
placeholder: 'Choose Your Country',
|
|
},
|
|
{
|
|
name: 'eligible',
|
|
label: 'Are you eligible to work?',
|
|
type: 'radio',
|
|
options: [
|
|
{ label: 'Yes', value: 'yes' },
|
|
{ label: 'No', value: 'no' },
|
|
],
|
|
},
|
|
]);
|
|
|
|
const skillsForm = new FormGroup([
|
|
{
|
|
name: 'js',
|
|
label: 'Javascript',
|
|
type: 'checkbox',
|
|
},
|
|
{
|
|
name: 'java',
|
|
label: 'Java',
|
|
type: 'checkbox',
|
|
},
|
|
{
|
|
name: 'astro',
|
|
label: 'Astro',
|
|
type: 'checkbox',
|
|
},
|
|
{
|
|
name: 'cpp',
|
|
label: 'C/C++',
|
|
type: 'checkbox',
|
|
},
|
|
{
|
|
name: 'sql',
|
|
label: 'SQL',
|
|
type: 'checkbox',
|
|
},
|
|
{
|
|
name: 'devops',
|
|
label: 'DevOps',
|
|
type: 'checkbox',
|
|
},
|
|
]);
|
|
|
|
const resume: ControlConfig = {
|
|
name: 'resume',
|
|
label: 'Upload Resume',
|
|
type: 'file',
|
|
};
|
|
|
|
const submit: Submit = {
|
|
name: 'submit',
|
|
type: 'submit',
|
|
value: "Let's go!",
|
|
};
|
|
|
|
const values = {
|
|
firstName: 'James',
|
|
lastName: 'Bond',
|
|
email: 'james.bond@gmail.com',
|
|
country: 'U.S.A',
|
|
eligible: 'yes',
|
|
};
|
|
|
|
infoForm.setValue(values);
|
|
|
|
infoForm.name = 'Application Form';
|
|
skillsForm.name = 'Skills';
|
|
|
|
skillsForm.controls.push(new FormControl(resume));
|
|
---
|
|
|
|
<Layout title="Programmer Job Application">
|
|
<Form showValidationHints formGroups={[infoForm, skillsForm]} submitControl={submit} />
|
|
</Layout>
|