update form example

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>