From 51ae44ed96af713712843ec5b68d09ae83fc0030 Mon Sep 17 00:00:00 2001
From: Fredrick W Warren <fredwarren@gmail.com>
Date: Fri, 12 Feb 2021 11:02:57 -0800
Subject: [PATCH] 16.03 Create Tab Panels for Login & Register

---
 src/pages/PageAuth.vue | 42 ++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 40 insertions(+), 2 deletions(-)

diff --git a/src/pages/PageAuth.vue b/src/pages/PageAuth.vue
index 7b930d6..aa390a7 100644
--- a/src/pages/PageAuth.vue
+++ b/src/pages/PageAuth.vue
@@ -1,13 +1,51 @@
 <template>
-  <p>Auth Page</p>
+  <q-page padding>
+    <q-card class="auth-tabs">
+      <q-tabs
+        v-model="tab"
+        dense
+        class="text-grey"
+        active-color="primary"
+        indicator-color="primary"
+        align="justify"
+        narrow-indicator
+      >
+        <q-tab name="login" label="Login" />
+        <q-tab name="register" label="Register" />
+      </q-tabs>
+
+      <q-separator />
+
+      <q-tab-panels v-model="tab" animated>
+        <q-tab-panel name="login">
+          <div class="text-h6">Login</div>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit.
+        </q-tab-panel>
+
+        <q-tab-panel name="register">
+          <div class="text-h6">Register</div>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit.
+        </q-tab-panel>
+      </q-tab-panels>
+    </q-card>
+  </q-page>
 </template>
 
 <script>
 export default {
+  name: 'Auth',
+  data () {
+    return {
+      tab: 'login'
+    }
+  }
 
 }
 </script>
 
 <style>
-
+  .auth-tabs {
+    max-width: 500px;
+    margin: 0 auto;
+  }
 </style>