docs: refresh playground example

Author: danielroe

playground/pages/about.vue

@@ -9,58 +9,31 @@
     <ion-content :fullscreen="true">
       <ion-header collapse="condense">
         <ion-toolbar>
-          <ion-title size="large">
-            Blank
-          </ion-title>
+          <ion-title size="large"> Blank </ion-title>
         </ion-toolbar>
       </ion-header>
-      <a href="/about">
-        About
-      </a>
 
-      <div id="container">
-        <strong>Ready to create an app?</strong>
-        <p>
-          Start with Ionic
-          <a
-            target="_blank"
-            rel="noopener noreferrer"
-            href="https://ionicframework.com/docs/components"
-          >
-            UI Components
-          </a>
-        </p>
-      </div>
+      <ion-list>
+        <ion-item>
+          <ion-checkbox slot="start" />
+          <ion-label>
+            <h1>Create Idea</h1>
+            <ion-note>Run Idea By Brandy</ion-note>
+          </ion-label>
+          <ion-badge slot="end" color="success"> 5 Days </ion-badge>
+        </ion-item>
+      </ion-list>
+
+      <ion-fab vertical="bottom" horizontal="end" slot="fixed">
+        <ion-fab-button @click="() => router.push('/new')">
+          <ion-icon :icon="add"></ion-icon>
+        </ion-fab-button>
+      </ion-fab>
     </ion-content>
   </ion-page>
 </template>
 
-<style scoped>
-  #container {
-    text-align: center;
-
-    position: absolute;
-    left: 0;
-    right: 0;
-    top: 50%;
-    transform: translateY(-50%);
-  }
-
-  #container strong {
-    font-size: 20px;
-    line-height: 26px;
-  }
-
-  #container p {
-    font-size: 16px;
-    line-height: 22px;
-
-    color: #8c8c8c;
-
-    margin: 0;
-  }
-
-  #container a {
-    text-decoration: none;
-  }
-</style>
+<script setup>
+import { add } from 'ionicons/icons'
+const router = useIonRouter()
+</script>

playground/pages/index.vue

@@ -0,0 +1,13 @@
+<template>
+  <ion-page>
+    <ion-header>
+      <ion-toolbar>
+        <ion-buttons slot="start">
+          <ion-back-button></ion-back-button>
+        </ion-buttons>
+        <ion-title>New Item</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content></ion-content>
+  </ion-page>
+</template>