From 0b624b1f5326d0497c5d883ea82533e031fc183f Mon Sep 17 00:00:00 2001
From: Ayo <ramon.aycojr@gmail.com>
Date: Tue, 25 Oct 2022 21:53:23 +0200
Subject: [PATCH] update form example

---
 src/pages/showcase/astro-reactive-form.astro | 65 ++++++++++++++++++++
 1 file changed, 65 insertions(+)

diff --git a/src/pages/showcase/astro-reactive-form.astro b/src/pages/showcase/astro-reactive-form.astro
index 8a04fce..ecda63e 100644
--- a/src/pages/showcase/astro-reactive-form.astro
+++ b/src/pages/showcase/astro-reactive-form.astro
@@ -1,4 +1,5 @@
 ---
+import Code from 'astro/components/Code.astro';
 import Layout from "../../layouts/Layout.astro";
 import Footer from "../../components/Footer.astro";
 import Back from "../../components/Back.astro";
@@ -7,6 +8,23 @@ import Form, {ControlConfig, FormGroup} from '@astro-reactive/form';
 import { Validators } from "@astro-reactive/validator";
 
 
+const simpleFormCode = `---
+const simpleForm = new FormGroup([
+  {
+    name: "simple-text",
+    label: "Simple Text Control",
+  },
+  {
+    name: 'email',
+    label: 'Email',
+    value: 'invalid-email',
+    validators: [Validators.email]
+  }
+]);
+---
+<Form showValidationHints={true} formGroups={simpleForm} />
+`
+
 const simpleForm = new FormGroup([
   {
     name: "simple-text",
@@ -20,6 +38,47 @@ const simpleForm = new FormGroup([
   }
 ]);
 
+const multipleFormGroupCode = `---
+const name: ControlConfig[] = [
+  {
+    name: "first-name",
+    value: "Ayo",
+    label: "First Name",
+    validators: [Validators.required]
+  },
+  {
+    name: "last-name",
+    label: "Last Name",
+    validators: [Validators.required]
+  },
+];
+
+const characteristics: ControlConfig[] = [
+  {
+    name: "is-good-looking",
+    type: "radio",
+    label: "Is Good Looking?",
+    value: [{value: "checked", label: "checked", checked: true}, {value: "not checked", label: "not checked", checked: false}],
+  },
+  {name: 'required', label: 'Required Field', placeholder: 'but empty 😔', validators: [Validators.required]},
+  {
+    name: "is-awesome",
+    type: "checkbox",
+    label: "Is Awesome?",
+    value: "checked",
+    labelPosition: "right",
+  },
+];
+
+const nameForm: FormGroup = new FormGroup(name, "Name");
+const characteristicsForm: FormGroup = new FormGroup(
+  characteristics,
+  "Characteristics"
+);
+---
+<Form showValidationHints={true} formGroups={[nameForm, characteristicsForm]} />
+`
+
 const name: ControlConfig[] = [
   {
     name: "first-name",
@@ -84,11 +143,17 @@ const characteristicsForm: FormGroup = new FormGroup(
       </li>
     </ul>
 
+
+
     <h2>Simple single form group</h2>
+    <p>Here's an example of a simple form with email validation</p>
     <Form showValidationHints={true} formGroups={simpleForm} />
+    <!--Code lang="typescript" theme="github-light" code={simpleFormCode} /-->
 
     <h2>Multiple Form Groups</h2>
+    <p>Here's a more complex example of a form with multiple fieldsets</p>
     <Form showValidationHints={true} formGroups={[nameForm, characteristicsForm]} />
+    <!--Code lang="typescript" theme="dark-plus" code={multipleFormGroupCode} /-->
 
     <Footer />
   </main>