73 lines
2.1 KiB
Vue
73 lines
2.1 KiB
Vue
|
<script lang="ts">
|
||
|
|
|
||
|
|
|
||
|
|
export default {
|
||
|
|
async setup() {
|
||
|
|
const res = await fetch(`http://localhost:7000/api/discover`)
|
||
|
|
|
||
|
|
return {
|
||
|
|
data: await res.json()
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
abbreviate(text: number) {
|
||
|
|
return Intl.NumberFormat('en-US', {
|
||
|
|
//@ts-ignore
|
||
|
|
notation: "compact",
|
||
|
|
maximumFractionDigits: 1
|
||
|
|
}).format(text)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<div class="max-w-5xl mx-auto">
|
||
|
|
<div class="p-2">
|
||
|
|
<h1 class="font-bold text-5xl text-white"> Discover </h1>
|
||
|
|
<p class="text-xl text-white"> Sort through popular categories</p>
|
||
|
|
|
||
|
|
<div class="pt-5 inline-flex text-white">
|
||
|
|
<p class="mr-2 font-bold text-white">Filter by tag</p>
|
||
|
|
<form class="relative">
|
||
|
|
<label for="searchBar" class="hidden">Search</label>
|
||
|
|
<v-icon
|
||
|
|
name="io-search-outline"
|
||
|
|
class="absolute my-auto inset-y-0 left-2"
|
||
|
|
></v-icon>
|
||
|
|
<input
|
||
|
|
type="text"
|
||
|
|
id="searchBar"
|
||
|
|
name="searchBar"
|
||
|
|
placeholder="Search"
|
||
|
|
class="rounded-md p-1 pl-8 text-black bg-neutral-500 placeholder:text-white"
|
||
|
|
/>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<ul class="">
|
||
|
|
<li v-for="category in data" :key="category" class="inline-flex m-2 hover:scale-105 transition-transform">
|
||
|
|
<div class="bg-ctp-crust max-w-[13.5rem] rounded-lg">
|
||
|
|
<a :href="`http://localhost:5173/game/${category.name}`">
|
||
|
|
<img :src="category.image" class="rounded-lg rounded-b-none">
|
||
|
|
</a>
|
||
|
|
|
||
|
|
<div class="p-2">
|
||
|
|
<div>
|
||
|
|
<p class="font-bold text-white 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>
|
||
|
|
</template>
|