docs(playground): minor clean up in the playground's tabs (#48)

Author: azrikahar

playground/pages/tabs/tab1.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { add } from 'ionicons/icons'
-
 definePageMeta({
   alias: ['/', '/tabs'],
 })
@@ -9,7 +7,7 @@ definePageMeta({
 <template>
   <ion-page>
     <ion-header translucent>
-      <ion-toolbar class="toolbar">
+      <ion-toolbar>
         <ion-thumbnail slot="start">
           <ion-img src="/icon.png" />
         </ion-thumbnail>

playground/pages/tabs/tab2.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { actionSheetController } from '@ionic/vue'
-import { camera, trash, close } from 'ionicons/icons'
+import { UserPhoto } from '@/composables/usePhotoGallery'
 const { photos, takePhoto, deletePhoto } = usePhotoGallery()
 
 const showActionSheet = async (photo: UserPhoto) => {
@@ -10,14 +10,14 @@ const showActionSheet = async (photo: UserPhoto) => {
       {
         text: 'Delete',
         role: 'destructive',
-        icon: trash,
+        icon: ioniconsTrash,
         handler: () => {
           deletePhoto(photo)
         },
       },
       {
         text: 'Cancel',
-        icon: close,
+        icon: ioniconsClose,
         role: 'cancel',
         handler: () => {
           // Nothing to do, action sheet is automatically closed
@@ -44,18 +44,15 @@ const showActionSheet = async (photo: UserPhoto) => {
       </ion-header>
       <ion-grid>
         <ion-row>
-          <ion-col size="6" :key="photo" v-for="photo in photos">
-            <ion-img
-              :src="photo.webviewPath"
-              @click="showActionSheet(photo)"
-            ></ion-img>
+          <ion-col size="6" :key="photo.filepath" v-for="photo in photos">
+            <ion-img :src="photo.webviewPath" @click="showActionSheet(photo)"></ion-img>
           </ion-col>
         </ion-row>
       </ion-grid>
 
       <ion-fab vertical="bottom" horizontal="center" slot="fixed">
         <ion-fab-button @click="takePhoto()">
-          <ion-icon :icon="camera"></ion-icon>
+          <ion-icon :icon="ioniconsCamera"></ion-icon>
         </ion-fab-button>
       </ion-fab>
     </ion-content>

playground/pages/tabs/tab4.vue

@@ -2,13 +2,13 @@
   <ion-page>
     <ion-header>
       <ion-toolbar>
-        <ion-title>Tab 3</ion-title>
+        <ion-title>Animation examples</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">Animation examples</ion-title>
         </ion-toolbar>
       </ion-header>