move category preview into a different file

src/views/HomepageView.vue

@@ -3,6 +3,7 @@ import { ref, type Ref } from 'vue'
 import StreamPreviewVue from '@/components/StreamPreview.vue'
 import ErrorMessage from '@/components/ErrorMessage.vue'
 import LoadingScreen from '@/components/LoadingScreen.vue'
+import CategoryPreview from '@/components/CategoryPreview.vue'
 
 export default {
   async setup() {
@@ -20,14 +21,6 @@ export default {
     }
   },
   methods: {
-    abbreviate(text: number) {
-      return Intl.NumberFormat('en-US', {
-        //@ts-ignore
-        notation: 'compact',
-        maximumFractionDigits: 1
-      }).format(text)
-    },
-
     filterSearches(toFilter: string) {
       const categories = this.$refs.categoryItem
       const wantedTags: string[] = toFilter.split(',').filter((v) => v.toLowerCase())
@@ -103,7 +96,8 @@ export default {
   components: {
     StreamPreviewVue,
     ErrorMessage,
-    LoadingScreen
+    LoadingScreen,
+    CategoryPreview
   }
 }
 </script>
@@ -156,29 +150,7 @@ export default {
         ref="categoryItem"
         class="inline-flex m-2 hover:scale-105 transition-transform"
       >
-        <div class="bg-ctp-crust w-40 lg:w-[13.5rem] md:w-[13.5rem] rounded-lg">
-          <router-link :to="`/game/${category.name}`">
-            <img :src="category.image" class="rounded-lg rounded-b-none" />
-          </router-link>
-
-          <div class="p-2">
-            <div>
-              <p class="font-bold text-white text-xl sm:text-base md: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>
+      <category-preview :category-data="category"></category-preview>
       </li>
     </ul>
   </div>