Add a search page

src/router/index.ts

@@ -4,6 +4,7 @@ const PageNotFound = () => import('../views/PageNotFound.vue')
 const PrivacyPageView = () => import('../views/PrivacyPageView.vue')
 const HomepageView = () => import('../views/HomepageView.vue')
 const CategoryView = () => import('../views/CategoryView.vue')
+const SearchPageView = () => import('../views/SearchPageView.vue')
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -12,6 +13,10 @@ const router = createRouter({
       path: '/',
       component: HomepageView
     },
+    {
+      path: '/search',
+      component: SearchPageView
+    },
     {
       path: '/game/:game',
       component: CategoryView

src/views/SearchPageView.vue

@@ -0,0 +1,94 @@
+<script lang="ts">
+import { type Ref, ref } from 'vue'
+import CategoryPreview from '@/components/CategoryPreview.vue'
+import ErrorMessage from '@/components/ErrorMessage.vue'
+import LoadingScreen from '@/components/LoadingScreen.vue'
+import StreamPreviewVue from '@/components/StreamPreview.vue'
+import ChannelPreview from '@/components/ChannelPreview.vue'
+
+export default {
+    setup() {
+        let data: Ref<any> = ref(null)
+        return {
+            data,
+        }
+    },
+    async mounted() {
+        try {
+            const protocol = import.meta.env.VITE_HTTPS === 'true' ? 'https://' : 'http://'
+            const res = await fetch(`${protocol}${import.meta.env.VITE_BACKEND_DOMAIN}/api/search?query=${this.$route.query.query}`)
+            const rawData = await res.json()
+
+            this.data = rawData.data
+            this.data.query = this.$route.query.query
+        } catch (e) {
+            this.data = { status: 'error' }
+        }
+
+    },
+    methods: {
+        getStream(channel: any) {
+            return {
+                ...channel.stream,
+                streamer: {
+                    name: channel.username,
+                    pfp: channel.pfp
+                }
+            }
+        }
+    },
+    components: {
+        CategoryPreview,
+        ErrorMessage,
+        LoadingScreen,
+        StreamPreviewVue,
+        ChannelPreview
+    }
+}
+</script>
+<template>
+    <loading-screen v-if="!data"></loading-screen>
+    <error-message v-else-if="data.status === 'error' || !data"></error-message>
+
+
+    <div v-else class="p-3 space-y-5">
+        <div v-if="data.channels.length > 0">
+            <h1 class="text-white font-bold text-4xl mb-2">Channels related to "{{ data.query }}"</h1>
+            <ul class="flex overflow-x-scroll overflow-y-hidden">
+                <li v-for="channel in data.channels" :key="channel" class="m-2 hover:scale-105 transition-transform">
+                    <channel-preview :channel="channel"></channel-preview>
+                </li>
+            </ul>
+        </div>
+
+        <div v-if="data.categories.length > 0">
+            <h1 class="text-white font-bold text-4xl mb-2">Categories related to "{{ data.query }}"</h1>
+            <ul class="flex max-w-[100vw] max-h-[27rem] overflow-x-scroll overflow-y-hidden">
+                <li v-for="category in data.categories" :key="category" class="m-2 hover:scale-105 transition-transform">
+                    <category-preview :category-data="category"></category-preview>
+                </li>
+            </ul>
+        </div>
+
+        <div v-if="data.relatedChannels.length > 0">
+            <h1 class="text-white font-bold text-4xl mb-2">Live channels with the tag "{{ data.query }}"</h1>
+            <ul class="flex overflow-x-scroll space-x-5 ">
+                <li v-for="channel in data.relatedChannels" :key="channel">
+                    <stream-preview-vue :stream="getStream(channel)"></stream-preview-vue>
+                </li>
+            </ul>
+        </div>
+
+
+        <div v-if="data.channelsWithTag.length > 0">
+            <h1 class="text-white font-bold text-4xl mb-2">Channels with the tag "{{ data.query }}"</h1>
+            <ul class="inline-flex overflow-y-hidden overflow-x-scroll max-w-[100vw] space-x-5">
+                <li v-for="channel in data.channelsWithTag" :key="channel">
+                    <channel-preview :channel="channel"></channel-preview>
+                </li>
+            </ul>
+        </div>
+
+
+    </div>
+</template>