Integrate demo and playground

Signed-off-by: Kiran Parajuli <[email protected]>

Author: kiranparajuli589

src/constants/theSidebarItems.ts

@@ -25,8 +25,11 @@ export default [
     name: "Project",
     children: [
       { name: "About", path: "/about" },
-      { name: "Example Usage", path: "/example-usage" },
-      { name: "Playground", path: "/playground" },
+      { name: "Demo", path: "/demo" },
+      {
+        name: "Playground",
+        path: "https://stackblitz.com/edit/vitejs-vite-px7jzkdy?file=src%2Fcomponents%2FHelloWorld.vue",
+      },
     ],
   },
 ];

src/router/index.ts

@@ -11,8 +11,8 @@ const router = createRouter({
       },
     },
     {
-      path: "/playground",
-      component: () => import("@/views/PlaygroundView.vue"),
+      path: "/demo",
+      component: () => import("@/views/DemoView.vue"),
       meta: {
         footer: true,
       },

src/views/AboutView.vue

@@ -60,7 +60,7 @@ const links = [
   },
   {
     title: "Playground",
-    url: "/playground",
+    url: "https://stackblitz.com/edit/vitejs-vite-px7jzkdy?file=src%2Fcomponents%2FHelloWorld.vue",
     color: "text-blue-500",
   },
   {

src/views/PlaygroundView.vue renamed to src/views/DemoView.vue

@@ -1,6 +1,6 @@
 <template>
   <section class="pg-view">
-    <h2>Simple form validation with Vue Formik</h2>
+    <h2 class="!text-xl !pb-1">Simple form validation with Vue Formik</h2>
     <hr class="mb-6" />
 
     <div class="mb-4 border-b">

src/views/HomeView.vue

@@ -13,7 +13,13 @@
         <router-link class="secondary-btn md" to="/getting-started/quick-start">
           Get Started
         </router-link>
-        <router-link class="secondary-btn md" to="/playground">Playground</router-link>
+        <a
+          class="secondary-btn md"
+          target="_blank"
+          href="https://stackblitz.com/edit/vitejs-vite-px7jzkdy?file=src%2Fcomponents%2FHelloWorld.vue"
+        >
+          Playground
+        </a>
       </div>
     </section>