move category preview into a different file

package-lock.json

@@ -13,6 +13,7 @@
         "oh-vue-icons": "^1.0.0-rc3",
         "video.js": "^8.0.4",
         "videojs-contrib-quality-levels": "^3.0.0",
+        "videojs-hls-quality-selector": "^1.1.4",
         "vue": "^3.2.47",
         "vue-router": "^4.1.6"
       },

src/components/CategoryPreview.vue

@@ -0,0 +1,48 @@
+<script lang="ts">
+export default {
+    props: {
+        categoryData: {
+            type: Object,
+            default: () => {}
+        }
+    },
+    setup(props) {
+        return {
+            category: props.categoryData
+        }
+    },
+    methods: {
+        abbreviate(text: number) {
+            return Intl.NumberFormat('en-US', {
+                //@ts-ignore
+                notation: 'compact',
+                maximumFractionDigits: 1
+            }).format(text)
+        },
+    }
+}
+</script>
+
+<template>
+    <div class="bg-ctp-crust w-40 lg:w-[11rem] 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>
+</template>

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">
+      <category-preview :category-data="category"></category-preview>
-          <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>
       </li>
     </ul>
   </div>