From 3851f4657a9593124e25029caa692379acdb63c6 Mon Sep 17 00:00:00 2001
From: David Nahodyl <david@gearboxgo.com>
Date: Fri, 7 Jun 2024 20:14:08 -0400
Subject: [PATCH] updated intro and nav

---
 playground/components/LabeledInput.vue |  2 +-
 playground/components/nav/NavBar.vue   | 28 +++++++++++++++---
 playground/pages/index.vue             | 41 +++++++++++++-------------
 3 files changed, 46 insertions(+), 25 deletions(-)

diff --git a/playground/components/LabeledInput.vue b/playground/components/LabeledInput.vue
index 6774253..1cae4bb 100644
--- a/playground/components/LabeledInput.vue
+++ b/playground/components/LabeledInput.vue
@@ -36,7 +36,7 @@ defineEmits(["change"]);
       :id="id"
       v-model="model"
       :name="name"
-      class="rounded-md px-2 py-1"
+      class="rounded-md bg-gray-950 px-2 py-1"
       @change="$emit('change')"
     />
     <div v-for="error in errors" :key="error" class="text-red-500">
diff --git a/playground/components/nav/NavBar.vue b/playground/components/nav/NavBar.vue
index 23a90b8..b14ba04 100644
--- a/playground/components/nav/NavBar.vue
+++ b/playground/components/nav/NavBar.vue
@@ -1,5 +1,21 @@
 <script setup lang="ts">
 import ContentWidthContainer from "~/components/ContentWidthContainer.vue";
+
+const route = useRoute();
+
+const activeClasses = (location) => {
+  if (location === route.path) {
+    return "border-b-4 border-blue-500";
+  }
+
+  return "border-b-4 border-transparent";
+};
+
+const links = [
+  { name: "Home", path: "/" },
+  { name: "Register", path: "/register" },
+  { name: "Register-Precognition", path: "/register-precog" },
+];
 </script>
 
 <template>
@@ -7,10 +23,14 @@ import ContentWidthContainer from "~/components/ContentWidthContainer.vue";
     <ContentWidthContainer>
       <div class="flex justify-between">
         <div class="flex">
-          <NuxtLink href="/" class="px-4 py-2 hover:bg-gray-800"> Home </NuxtLink>
-
-          <NuxtLink href="/register" class="px-4 py-2 hover:bg-gray-800"> Register </NuxtLink>
-          <NuxtLink href="/register-precog" class="px-4 py-2 hover:bg-gray-800"> Register-Precognition </NuxtLink>
+          <NuxtLink
+            v-for="link in links"
+            :href="link.path"
+            class="px-4 pb-2 pt-4 hover:bg-gray-800"
+            :class="activeClasses(link.path)"
+          >
+            {{ link.name }}
+          </NuxtLink>
         </div>
       </div>
     </ContentWidthContainer>
diff --git a/playground/pages/index.vue b/playground/pages/index.vue
index 205e62d..fbef8a9 100644
--- a/playground/pages/index.vue
+++ b/playground/pages/index.vue
@@ -3,27 +3,28 @@
 <template>
   <div class="prose prose-invert">
     <h1>Nuxt Precognition Example</h1>
-    <div>
-      <p>This is a playground for testing the Nuxt Precognition module.</p>
-      <p>There are two different registration form examples which you can try out:</p>
-      <p>
-        The first "Register" is a form which uses the <code>useForm</code> composable. Form data is sent to the server
-        and validated upons submission.
-      </p>
-      <p>
-        The useForm composable is used to provide some very convenient lifecycle hooks for the form, as well as nice
-        validation and error handling.
-      </p>
+    <p>This is a playground for testing the Nuxt Precognition module.</p>
+    <p>There are two different registration form examples which you can try out.</p>
+    <h2>Register Form</h2>
+    <p>
+      The first "Register" is a form which uses the <code>useForm</code> composable. Form data is sent to the server and
+      validated upons submission.
+    </p>
+    <p>
+      The useForm composable is used to provide some very convenient lifecycle hooks for the form, as well as nice
+      validation and error handling.
+    </p>
 
-      <NuxtLink to="/register-form">Register Form</NuxtLink>
+    <NuxtLink to="/register-form">Register Form</NuxtLink>
 
-      <p>The second "Register-Precog"is a form which uses the <code>usePrecognitionForm</code> composable.</p>
-      <p>
-        In addition to the features of the <code>useForm</code> composable, the usePrecognitionForm composable also
-        provides a <code>validate</code> method which can be used to validate the form data before the form is
-        submitted. This method is called on the @change hook of the inputs to validate as the user is entering data.
-      </p>
-      <NuxtLink to="/register-precog">Register Precognition</NuxtLink>
-    </div>
+    <h2>Register Form with Precognition</h2>
+
+    <p>The second "Register-Precog"is a form which uses the <code>usePrecognitionForm</code> composable.</p>
+    <p>
+      In addition to the features of the <code>useForm</code> composable, the usePrecognitionForm composable also
+      provides a <code>validate</code> method which can be used to validate the form data before the form is submitted.
+      This method is called on the @change hook of the inputs to validate as the user is entering data.
+    </p>
+    <NuxtLink to="/register-precog">Register with Precognition</NuxtLink>
   </div>
 </template>