add web

web/src/components/HelloWorld.vue

@@ -0,0 +1,43 @@
+<script setup>
+import { ref } from 'vue'
+
+defineProps({
+  msg: String,
+})
+
+const count = ref(0)
+</script>
+
+<template>
+  <h1>{{ msg }}</h1>
+
+  <div class="card">
+    <button type="button" @click="count++">count is {{ count }}</button>
+    <p>
+      Edit
+      <code>components/HelloWorld.vue</code> to test HMR
+    </p>
+  </div>
+
+  <p>
+    Check out
+    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
+      >create-vue</a
+    >, the official Vue + Vite starter
+  </p>
+  <p>
+    Learn more about IDE Support for Vue in the
+    <a
+      href="https://vuejs.org/guide/scaling-up/tooling.html#ide-support"
+      target="_blank"
+      >Vue Docs Scaling up Guide</a
+    >.
+  </p>
+  <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
+</template>
+
+<style scoped>
+.read-the-docs {
+  color: #888;
+}
+</style>

web/src/components/NavBar.vue

@@ -0,0 +1,13 @@
+<template>
+    <div class="bg-black text-lg flex flex-row **:items-center p-4">
+        <div class="w-10 h-10 rounded-full overflow-hidden">
+            <img :src="MeowLogo" alt="Logo">
+        </div>
+        <div class="text-white ml-4 font-bold text-xl leading-10">
+            Meow Paste
+        </div>
+    </div>
+</template>
+<script setup>
+import MeowLogo from '../assets/meow.png'
+</script>