ngn/safetwitch
1
0
Fork 0
Code Issues 1 Pull Requests 10 Actions Packages Activity

Fix frontend for seperate backend, and make preferences page

Browse Source
This commit is contained in:
dragongoose
2023-03-24 18:48:45 -04:00
parent 1e9726a601
commit edcc3efe1d
11 changed files with 230 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
src/views/HomepageView.vue
View File

@ -1,21 +1,22 @@
<script lang="ts">
export default {
async setup() {
const res = await fetch(`http://localhost:7000/api/discover`)
const res = await fetch(`${import.meta.env.VITE_BACKEND_URL}/api/discover`)
console.log(import.meta.env)
let frontend_url = import.meta.env.VITE_INSTANCE_URL
return {
data: await res.json()
data: await res.json(),
frontend_url
}
},
methods: {
abbreviate(text: number) {
return Intl.NumberFormat('en-US', {
//@ts-ignore
notation: "compact",
maximumFractionDigits: 1
}).format(text)
return Intl.NumberFormat('en-US', {
//@ts-ignore
notation: 'compact',
maximumFractionDigits: 1
}).format(text)
}
}
}
@ -24,17 +25,14 @@ export default {
<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>
<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>
<v-icon name="io-search-outline" class="absolute my-auto inset-y-0 left-2"></v-icon>
<input
type="text"
id="searchBar"
@ -47,21 +45,28 @@ export default {
</div>
<ul class="">
<li v-for="category in data" :key="category" class="inline-flex m-2 hover:scale-105 transition-transform">
<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>
<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"> {{ category.displayName }}</p>
<p class="text-sm text-white"> {{ abbreviate(category.viewers) }} viewers</p>
<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>
<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>