Move folder

src/views/HomepageView.vue

@@ -0,0 +1,72 @@
+<script lang="ts">
+
+
+export default {
+  async setup() {
+    const res = await fetch(`http://localhost:7000/api/discover`)
+
+    return {
+      data: await res.json()
+    }
+  },
+  methods: {
+    abbreviate(text: number) {
+        return Intl.NumberFormat('en-US', {
+            //@ts-ignore
+            notation: "compact",
+            maximumFractionDigits: 1
+        }).format(text)
+    }
+  }
+}
+</script>
+
+<template>
+  <div class="max-w-5xl mx-auto">
+    <div class="p-2">
+      <h1 class="font-bold text-5xl text-white"> Discover </h1>
+      <p class="text-xl text-white"> Sort through popular categories</p>
+
+      <div class="pt-5 inline-flex text-white">
+        <p class="mr-2 font-bold text-white">Filter by tag</p>
+        <form class="relative">
+          <label for="searchBar" class="hidden">Search</label>
+          <v-icon
+            name="io-search-outline"
+            class="absolute my-auto inset-y-0 left-2"
+          ></v-icon>
+          <input
+            type="text"
+            id="searchBar"
+            name="searchBar"
+            placeholder="Search"
+            class="rounded-md p-1 pl-8 text-black bg-neutral-500 placeholder:text-white"
+          />
+        </form>
+      </div>
+    </div>
+
+    <ul class="">
+      <li v-for="category in data" :key="category" class="inline-flex m-2 hover:scale-105 transition-transform">
+        <div class="bg-ctp-crust max-w-[13.5rem] rounded-lg">
+          <a :href="`http://localhost:5173/game/${category.name}`">
+            <img :src="category.image" class="rounded-lg rounded-b-none">
+          </a>
+
+          <div class="p-2">
+            <div>
+              <p class="font-bold text-white text-xl"> {{ category.displayName }}</p>
+              <p class="text-sm  text-white"> {{ abbreviate(category.viewers) }} viewers</p>
+            </div>
+
+            <ul class="h-8 overflow-hidden">
+              <li v-for="tag in category.tags" :key="tag" class="inline-flex">
+                <span class="p-2.5 py-1.5 bg-ctp-surface0 rounded-md m-0.5 text-xs font-bold text-white">{{ tag }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </li>
+    </ul>
+  </div>
+</template>