From a37b6c80df247ebbd966d12e79cfbdaa9c6e22af Mon Sep 17 00:00:00 2001
From: Neil An <54966170+NeilAn99@users.noreply.github.com>
Date: Sat, 29 Oct 2022 06:45:21 -0400
Subject: [PATCH] feat: add a new demo page! (#164)

* integrated tailwind

* added links to job application page

* feat: add a new demo page
---
 apps/demo/astro.config.mjs                |   5 +-
 apps/demo/src/pages/index.astro           |   2 +-
 apps/demo/src/pages/job-application.astro | 141 ++++++++++++++++++++++
 apps/demo/src/pages/pizza-delivery.astro  |   2 +-
 4 files changed, 147 insertions(+), 3 deletions(-)
 create mode 100644 apps/demo/src/pages/job-application.astro
diff --git a/apps/demo/astro.config.mjs b/apps/demo/astro.config.mjs
index 882e651..572b8cb 100644
--- a/apps/demo/astro.config.mjs
+++ b/apps/demo/astro.config.mjs
@@ -1,4 +1,7 @@
 import { defineConfig } from 'astro/config';
+import tailwind from '@astrojs/tailwind';
 
 // https://astro.build/config
-export default defineConfig({});
+export default defineConfig({
+    integrations: [tailwind()]
+});
diff --git a/apps/demo/src/pages/index.astro b/apps/demo/src/pages/index.astro
index d72fea0..af65617 100644
--- a/apps/demo/src/pages/index.astro
+++ b/apps/demo/src/pages/index.astro
@@ -83,7 +83,7 @@ const theme = "dark";
     <title>Astro</title>
   </head>
   <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>
     <Form showValidationHints={true} formGroups={form} theme={theme} />
     <style>
diff --git a/apps/demo/src/pages/job-application.astro b/apps/demo/src/pages/job-application.astro
new file mode 100644
index 0000000..9fda326
--- /dev/null
+++ b/apps/demo/src/pages/job-application.astro
@@ -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>
diff --git a/apps/demo/src/pages/pizza-delivery.astro b/apps/demo/src/pages/pizza-delivery.astro
index ce8b9e1..bf493a3 100644
--- a/apps/demo/src/pages/pizza-delivery.astro
+++ b/apps/demo/src/pages/pizza-delivery.astro
@@ -98,7 +98,7 @@ infoForm.name = "Customer Info";
     <title>Astro</title>
   </head>
   <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>
     <Form
       showValidationHints={true}
