feat: updates

components/Counter.vue

@@ -4,12 +4,14 @@ const { count, inc, dec } = useCount()
 
 <template>
   <div m="y-3">
-    <button border="~ rounded gray-400" class="px-2 mx-2 hover:bg-gray-400/20 !outline-none" @click="dec()">
-      dec
+    <button class="btn" @click="dec()">
+      -
     </button>
-    <span font="mono">{{ count }}</span>
-    <button border="~ rounded gray-400" class="px-2 mx-2 hover:bg-gray-400/20 !outline-none" @click="inc()">
-      inc
+    <div font="mono" w="15" inline-block>
+      {{ count }}
+    </div>
+    <button class="btn" @click="inc()">
+      +
     </button>
   </div>
 </template>

components/Footer.vue

@@ -0,0 +1,12 @@
+<template>
+  <div
+    text="3xl gray-500"
+    m-5
+    flex
+    justify-center
+    gap-2
+  >
+    <a i-carbon-campsite href="https://github.com/antfu/vitesse-nuxt" target="__blank" />
+    <DarkToggle />
+  </div>
+</template>

components/Hello.vue

@@ -1,5 +0,0 @@
-<template>
-  <div op-50 text-lg>
-    This is an auto imported component
-  </div>
-</template>

components/InputEntry.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+const name = ref('')
+
+const router = useRouter()
+const go = () => {
+  if (name.value)
+    router.push(`/hi/${encodeURIComponent(name.value)}`)
+}
+</script>
+
+<template>
+  <input
+    id="input"
+    v-model="name"
+    placeholder="What's your name?"
+    type="text"
+    autocomplete="false"
+    p="x-4 y-2"
+    w="250px"
+    text="center"
+    bg="transparent"
+    border="~ rounded gray-200 dark:gray-700"
+    outline="none active:none"
+    @keydown.enter="go"
+  >
+  <div>
+    <button
+      class="m-3 text-sm btn"
+      :disabled="!name"
+      @click="go"
+    >
+      GO
+    </button>
+  </div>
+</template>