48 lines
1.4 KiB
Vue
48 lines
1.4 KiB
Vue
|
<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>
|