70 lines
1.9 KiB
Vue
70 lines
1.9 KiB
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>
|