updates tab and route names

ceceliacreates · Sep 4, 2023 · e909da3 · e909da3
1 parent 64f26c9
commit e909da3
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 27 deletions.
diff --git a/src/router/index.ts b/src/router/index.ts
@@ -5,27 +5,27 @@ import TabsPage from '../views/TabsPage.vue'
 const routes: Array<RouteRecordRaw> = [
   {
     path: '/',
-    redirect: '/tabs/tab1'
+    redirect: '/tabs/play'
   },
   {
     path: '/tabs/',
     component: TabsPage,
     children: [
       {
         path: '',
-        redirect: '/tabs/tab1'
+        redirect: '/tabs/play'
       },
       {
-        path: 'tab1',
-        component: () => import('@/views/Tab1Page.vue')
+        path: 'play',
+        component: () => import('@/views/PlayPage.vue')
       },
       {
-        path: 'tab2',
-        component: () => import('@/views/Tab2Page.vue')
+        path: 'about',
+        component: () => import('@/views/AboutPage.vue')
       },
       {
-        path: 'tab3',
-        component: () => import('@/views/Tab3Page.vue')
+        path: 'scores',
+        component: () => import('@/views/ScoresPage.vue')
       }
     ]
   }

diff --git a/src/views/Tab1Page.vue → src/views/AboutPage.vue b/src/views/Tab1Page.vue → src/views/AboutPage.vue
@@ -2,17 +2,17 @@
   <ion-page>
     <ion-header>
       <ion-toolbar>
-        <ion-title>Tab 1</ion-title>
+        <ion-title>About</ion-title>
       </ion-toolbar>
     </ion-header>
     <ion-content :fullscreen="true">
       <ion-header collapse="condense">
         <ion-toolbar>
-          <ion-title size="large">Tab 1</ion-title>
+          <ion-title size="large">About</ion-title>
         </ion-toolbar>
       </ion-header>
 
-      <ExploreContainer name="Tab 1 page" />
+      <ExploreContainer name="About page" />
     </ion-content>
   </ion-page>
 </template>

diff --git a/src/views/Tab2Page.vue → src/views/PlayPage.vue b/src/views/Tab2Page.vue → src/views/PlayPage.vue
@@ -2,17 +2,17 @@
   <ion-page>
     <ion-header>
       <ion-toolbar>
-        <ion-title>Tab 2</ion-title>
+        <ion-title>Play</ion-title>
       </ion-toolbar>
     </ion-header>
     <ion-content :fullscreen="true">
       <ion-header collapse="condense">
         <ion-toolbar>
-          <ion-title size="large">Tab 2</ion-title>
+          <ion-title size="large">Play</ion-title>
         </ion-toolbar>
       </ion-header>
 
-      <ExploreContainer name="Tab 2 page" />
+      <ExploreContainer name="Play page" />
     </ion-content>
   </ion-page>
 </template>

diff --git a/src/views/Tab3Page.vue → src/views/ScoresPage.vue b/src/views/Tab3Page.vue → src/views/ScoresPage.vue
@@ -2,17 +2,17 @@
   <ion-page>
     <ion-header>
       <ion-toolbar>
-        <ion-title>Tab 3</ion-title>
+        <ion-title>Scores</ion-title>
       </ion-toolbar>
     </ion-header>
     <ion-content :fullscreen="true">
       <ion-header collapse="condense">
         <ion-toolbar>
-          <ion-title size="large">Tab 3</ion-title>
+          <ion-title size="large">Scores</ion-title>
         </ion-toolbar>
       </ion-header>
 
-      <ExploreContainer name="Tab 3 page" />
+      <ExploreContainer name="Scores page" />
     </ion-content>
   </ion-page>
 </template>

diff --git a/src/views/TabsPage.vue b/src/views/TabsPage.vue
@@ -3,19 +3,19 @@
     <ion-tabs>
       <ion-router-outlet></ion-router-outlet>
       <ion-tab-bar slot="bottom">
-        <ion-tab-button tab="tab1" href="/tabs/tab1">
-          <ion-icon aria-hidden="true" :icon="triangle" />
-          <ion-label>Tab 1</ion-label>
+        <ion-tab-button tab="play" href="/tabs/play">
+          <ion-icon aria-hidden="true" :icon="gameControllerOutline" />
+          <ion-label>Play</ion-label>
         </ion-tab-button>
 
-        <ion-tab-button tab="tab2" href="/tabs/tab2">
-          <ion-icon aria-hidden="true" :icon="ellipse" />
-          <ion-label>Tab 2</ion-label>
+        <ion-tab-button tab="about" href="/tabs/about">
+          <ion-icon aria-hidden="true" :icon="helpOutline" />
+          <ion-label>About</ion-label>
         </ion-tab-button>
 
-        <ion-tab-button tab="tab3" href="/tabs/tab3">
-          <ion-icon aria-hidden="true" :icon="square" />
-          <ion-label>Tab 3</ion-label>
+        <ion-tab-button tab="scores" href="/tabs/scores">
+          <ion-icon aria-hidden="true" :icon="trophyOutline" />
+          <ion-label>Scores</ion-label>
         </ion-tab-button>
       </ion-tab-bar>
     </ion-tabs>
@@ -24,5 +24,5 @@
 
 <script setup lang="ts">
 import { IonTabBar, IonTabButton, IonTabs, IonLabel, IonIcon, IonPage, IonRouterOutlet } from '@ionic/vue';
-import { ellipse, square, triangle } from 'ionicons/icons';
+import { gameControllerOutline, helpOutline, trophyOutline } from 'ionicons/icons';
 </script>