safetwitch/src/views/CategoryView.vue

<script lang="ts">
import { useRoute } from 'vue-router'
import StreamPreviewVue from '@/components/StreamPreview.vue'

export default {
  async setup() {
    const route = useRoute()
    const game = route.params.game
    const res = await fetch(`${import.meta.env.VITE_BACKEND_URL}/api/discover/${game}`)
    const data = await res.json()
    let frontend_url = import.meta.env.VITE_INSTANCE_URL
    return {
      data,
      frontend_url
    }
  },

  methods: {
    abbreviate(text: number) {
      return Intl.NumberFormat('en-US', {
        //@ts-ignore
        notation: 'compact',
        maximumFractionDigits: 1
      }).format(text)
    }
  },
  components: {
    StreamPreviewVue
  }
}
</script>

<template>
  <div class="flex flex-col max-w-5xl mx-auto">
    <div class="flex space-x-4 p-3">
      <img :src="data.cover" class="self-start rounded-md" />

      <div>
        <h1 class="font-bold text-5xl text-white">{{ data.name }}</h1>
        <div class="inline-flex my-1 space-x-3">
          <p class="font-bold text-white text-lg">Followers: {{ abbreviate(data.followers) }}</p>
          <p class="font-bold text-white text-lg">Viewers: {{ abbreviate(data.viewers) }}</p>
        </div>

        <ul class="mb-5">
          <li v-for="tag in data.tags" :key="tag" class="inline-flex">
            <span class="text-white p-1 py-0.5 mr-1 text-sm font-bold bg-ctp-overlay1 rounded-sm">{{
              tag
            }}</span>
          </li>
        </ul>

        <p class="text-md text-gray-400 overflow-y-auto">{{ data.description }}</p>
      </div>
    </div>

    <div class="max-w-[58rem] mx-auto">
      <ul>
        <li
          v-for="stream in data.streams"
          :key="stream"
          class="inline-flex m-2 hover:scale-105 transition-transform"
        >
          <StreamPreviewVue :stream="stream"></StreamPreviewVue>
        </li>
      </ul>
    </div>
  </div>
</template>