From c338533e346d00fc2d7f91ccd039d9aef37d28bc Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Fri, 5 Nov 2021 11:46:29 +0800
Subject: [PATCH] feat: update UI

---
 app.vue                   |  1 +
 components/Counter.vue    | 12 ++++++------
 components/Footer.vue     |  3 ++-
 components/InputEntry.vue |  1 +
 components/PageView.vue   |  4 ++--
 nuxt.config.ts            |  3 +++
 pages/hi/[id].vue         |  8 +++++++-
 pages/index.vue           | 12 +++++++++---
 8 files changed, 31 insertions(+), 13 deletions(-)

diff --git a/app.vue b/app.vue
index d211dc3..5a92bd2 100644
--- a/app.vue
+++ b/app.vue
@@ -1,6 +1,7 @@
 <template>
   <main class="py-20 px-10 text-center">
     <NuxtPage />
+    <Footer />
   </main>
 </template>
 
diff --git a/components/Counter.vue b/components/Counter.vue
index 643443c..d81305c 100644
--- a/components/Counter.vue
+++ b/components/Counter.vue
@@ -3,15 +3,15 @@ const { count, inc, dec } = useCount()
 </script>
 
 <template>
-  <div m="y-3">
-    <button class="btn" @click="dec()">
-      -
+  <div inline-flex m="y-3">
+    <button btn class="!p-2" @click="dec()">
+      <div i-carbon-subtract></div>
     </button>
-    <div font="mono" w="15" inline-block>
+    <div font="mono" w="15" m-auto inline-block>
       {{ count }}
     </div>
-    <button class="btn" @click="inc()">
-      +
+    <button btn class="!p-2" @click="inc()">
+      <div i-carbon-add></div>
     </button>
   </div>
 </template>
diff --git a/components/Footer.vue b/components/Footer.vue
index 3b080dd..2308f5e 100644
--- a/components/Footer.vue
+++ b/components/Footer.vue
@@ -6,7 +6,8 @@
     justify-center
     gap-2
   >
-    <a i-carbon-campsite href="https://github.com/antfu/vitesse-nuxt3" target="__blank" />
+    <NuxtLink i-carbon-campsite to="/" />
+    <a i-carbon-logo-github href="https://github.com/antfu/vitesse-nuxt3" target="__blank" />
     <DarkToggle />
   </div>
 </template>
diff --git a/components/InputEntry.vue b/components/InputEntry.vue
index 4053b5a..076455a 100644
--- a/components/InputEntry.vue
+++ b/components/InputEntry.vue
@@ -16,6 +16,7 @@ const go = () => {
     type="text"
     autocomplete="false"
     p="x-4 y-2"
+    m="t-5"
     w="250px"
     text="center"
     bg="transparent"
diff --git a/components/PageView.vue b/components/PageView.vue
index 5415a4f..17506bc 100644
--- a/components/PageView.vue
+++ b/components/PageView.vue
@@ -3,7 +3,7 @@ const { data } = await useFetch('/api/pageview')
 </script>
 
 <template>
-  <div>
-    Page view: {{ data.pageview }}
+  <div op50>
+    Pageview: {{ data.pageview }}
   </div>
 </template>
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 7dbfd93..1efc65f 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -2,6 +2,9 @@ import { defineNuxtConfig } from 'nuxt3'
 import { presetAttributify, presetUno, presetIcons } from 'unocss'
 
 export default defineNuxtConfig({
+  meta: {
+    title: 'Vitesse Nuxt 3',
+  },
   buildModules: [
     '@vueuse/core/nuxt',
     '@unocss/nuxt',
diff --git a/pages/hi/[id].vue b/pages/hi/[id].vue
index fd891d0..26a4bd1 100644
--- a/pages/hi/[id].vue
+++ b/pages/hi/[id].vue
@@ -1,10 +1,16 @@
 <script setup lang="ts">
 const route = useRoute()
+
+const name = route.params.id
 </script>
 
 <template>
   <div>
-    <div>Hi: {{ route.params.id }}</div>
+    <div i-twemoji:waving-hand text-4xl inline-block animate-bounce></div>
+    <h3 text-2xl>
+      Hi!
+    </h3>
+    <div>{{ name }}</div>
 
     <div>
       <NuxtLink
diff --git a/pages/index.vue b/pages/index.vue
index 942ba27..91965f0 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -2,13 +2,19 @@
   <div>
     <img w-16 inline-block src="/nuxt.png" />
     <img w-16 inline-block src="/vite.png" />
-    <h1 mt-1 mb-3 text-2xl cursor-default>
+    <h1 mt-1 text-2xl cursor-default>
       <span text-green-500 hover:text-white hover:bg-green-600>Nuxt 3</span>
       <span text-gray-400 mx-2>+</span>
       <span text-purple-500>Vitesse</span>
     </h1>
+    <Suspense>
+      <PageView />
+      <template #fallback>
+        <div op50 italic animate-pulse>
+          Loading...
+        </div>
+      </template>
+    </Suspense>
     <InputEntry />
-    <PageView />
-    <Footer />
   </div>
 </template>