feat: add a new demo page! (#164)
* integrated tailwind * added links to job application page * feat: add a new demo page
This commit is contained in:
Neil An
GitHub
parent
b9a3e5a8fc
commit
a37b6c80df
4 changed files with 147 additions and 3 deletions
|
|
@ -1,4 +1,7 @@
|
||||||
import { defineConfig } from 'astro/config';
|
import { defineConfig } from 'astro/config';
|
||||||
|
import tailwind from '@astrojs/tailwind';
|
||||||
|
|
||||||
// https://astro.build/config
|
// https://astro.build/config
|
||||||
export default defineConfig({});
|
export default defineConfig({
|
||||||
|
integrations: [tailwind()]
|
||||||
|
});
|
||||||
|
|
|
||||||
|
|
@ -83,7 +83,7 @@ const theme = "dark";
|
||||||
<title>Astro</title>
|
<title>Astro</title>
|
||||||
</head>
|
</head>
|
||||||
<body class={theme}>
|
<body class={theme}>
|
||||||
<nav>Examples: <a href="/pizza-delivery">Pizza Delivery</a></nav>
|
<nav>Examples: <a href="/pizza-delivery">Pizza Delivery</a> | <a href="/job-application">Job Application</a></nav>
|
||||||
<h1>Astro Reactive Form</h1>
|
<h1>Astro Reactive Form</h1>
|
||||||
<Form showValidationHints={true} formGroups={form} theme={theme} />
|
<Form showValidationHints={true} formGroups={form} theme={theme} />
|
||||||
<style>
|
<style>
|
||||||
|
|
|
||||||
141
apps/demo/src/pages/job-application.astro
Normal file
141
apps/demo/src/pages/job-application.astro
Normal file
|
|
@ -0,0 +1,141 @@
|
||||||
|
---
|
||||||
|
import Form, {
|
||||||
|
ControlConfig,
|
||||||
|
FormControl,
|
||||||
|
FormGroup,
|
||||||
|
} from "@astro-reactive/form";
|
||||||
|
import { Validators } from "@astro-reactive/validator";
|
||||||
|
|
||||||
|
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: ControlConfig = {
|
||||||
|
name: "submit",
|
||||||
|
type: "submit",
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
infoForm.name = "Application Form";
|
||||||
|
skillsForm.name = "Skills"
|
||||||
|
|
||||||
|
skillsForm.controls.push(new FormControl(resume));
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||||
|
<meta name="viewport" content="width=device-width" />
|
||||||
|
<meta name="generator" content={Astro.generator} />
|
||||||
|
<title>Astro</title>
|
||||||
|
</head>
|
||||||
|
<body class="bg-gray-100 text-gray-900 tracking-wider leading-normal">
|
||||||
|
|
||||||
|
<!-- Navbar -->
|
||||||
|
<nav class="bg-sky-300 fixed w-full z-10 top-0 shadow text-xl pl-3">Examples: <a href="/">Home</a> | <a href="/pizza-delivery">Pizza Delivery</a></nav>
|
||||||
|
|
||||||
|
<!-- Title -->
|
||||||
|
<div class="items-center mt-10">
|
||||||
|
<h1 class="items-center text-center font-sans font-bold break-normal text-gray-700 px-2 text-xl mt-12 lg:mt-0 md:text-5xl">Programmer Job Application</h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!--Container-->
|
||||||
|
<div class="container w-full flex flex-wrap mx-auto px-2 pt-8 lg:pt-10 mt-4">
|
||||||
|
|
||||||
|
<!-- Section -->
|
||||||
|
<section class="w-full">
|
||||||
|
|
||||||
|
<!-- Horizontal Rule -->
|
||||||
|
<hr class="bg-gray-300 w-full">
|
||||||
|
|
||||||
|
<!-- Header -->
|
||||||
|
<h2 id='section1' class="font-sans font-bold break-normal text-gray-700 px-2 pb-4 text-xl">Enter your information</h2>
|
||||||
|
|
||||||
|
<!-- Form -->
|
||||||
|
<div class="p-8 mt-6 lg:mt-0 leading-normal rounded shadow bg-slate-200">
|
||||||
|
<Form showValidationHints={true} formGroups={[infoForm, skillsForm]} submitControl={submit}></Form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -98,7 +98,7 @@ infoForm.name = "Customer Info";
|
||||||
<title>Astro</title>
|
<title>Astro</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<nav><a href="/">Home</a></nav>
|
<nav><a href="/">Home</a> | <a href="/job-application">Job Application</a></nav>
|
||||||
<h1>Pizza Form Demo</h1>
|
<h1>Pizza Form Demo</h1>
|
||||||
<Form
|
<Form
|
||||||
showValidationHints={true}
|
showValidationHints={true}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue