antonioandre/nuxt-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: atualiza todo design interno da aplicacao

Browse Source
This commit is contained in:
Antonio Andre
2026-05-28 18:23:00 -05:00
parent 6cc39725fa
commit dfe8eb3a80
11 changed files with 978 additions and 206 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
app/pages/(protected)/ranking-jogos/index.vue
View File

@@ -19,11 +19,6 @@
Acompanhe os jogos por período, plataforma e volume de jogadores ativos.
</p>
</div>
<NuxtLink to="/home"
class="inline-flex h-10 items-center justify-center rounded-full border border-[#d6d3d1] bg-transparent px-5 text-[15px] font-medium leading-none text-[#0c0a09] transition hover:border-[#0c0a09]">
Voltar
</NuxtLink>
</header>
<section
@@ -92,13 +87,24 @@
<strong class="text-base font-medium leading-6 tracking-[0.16px] text-[#0c0a09]">
{{ game.name }}
</strong>
<button type="button" :disabled="togglingId === game.name"
:aria-label="favoriteIds.has(game.name) ? 'Remover dos favoritos' : 'Adicionar aos favoritos'"
@click="toggleFavorite(game)"
<button type="button" :disabled="togglingId === game.name" :aria-label="favoriteIds.has(game.name)
? 'Remover dos favoritos'
: 'Adicionar aos favoritos'
" @click="toggleFavorite(game)"
class="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-full transition hover:bg-[#f0efed] disabled:cursor-not-allowed disabled:opacity-50">
<Icon
:name="togglingId === game.name ? 'mdi:loading' : favoriteIds.has(game.name) ? 'mdi:heart' : 'mdi:heart-outline'"
:class="['text-base', togglingId === game.name ? 'animate-spin text-[#777169]' : favoriteIds.has(game.name) ? 'text-rose-500' : 'text-[#777169]']" />
<Icon :name="togglingId === game.name
? 'mdi:loading'
: favoriteIds.has(game.name)
? 'mdi:heart'
: 'mdi:heart-outline'
" :class="[
'text-base',
togglingId === game.name
? 'animate-spin text-[#777169]'
: favoriteIds.has(game.name)
? 'text-rose-500'
: 'text-[#777169]'
]" />
</button>
</div>
</div>
@@ -119,8 +125,8 @@
<div class="flex flex-col items-center gap-2 text-center text-xs leading-[1.4] tracking-[0.16px] text-[#777169]">
<p>
Microsserviço consumido: <span
class="font-medium text-[#4e4e4e]">https://api-ranking-jogos-production.up.railway.app/api/v1</span>
Microsserviço consumido:
<span class="font-medium text-[#4e4e4e]">https://api-ranking-jogos-production.up.railway.app/api/v1</span>
&nbsp;·&nbsp; Feito por Gabriel e Kaiky
</p>
<span class="inline-flex items-center gap-1.5">
@@ -134,7 +140,8 @@
<script setup>
definePageMeta({
middleware: 'auth'
middleware: 'auth',
layout: 'protected'
})
const RANKINGS_API_BASE_URL = 'https://api-ranking-jogos-production.up.railway.app/api/v1'
@@ -222,7 +229,9 @@ const favoriteIds = ref(new Set())
const togglingId = ref(null)
const selectedRankingMeta = computed(() => {
return rankingOptions.find((option) => option.value === selectedRanking.value) ?? rankingOptions[0]
return (
rankingOptions.find((option) => option.value === selectedRanking.value) ?? rankingOptions[0]
)
})
const clearToken = () => {
@@ -284,7 +293,8 @@ async function fetchRankings() {
}
rankings.value = []
errorMessage.value = error?.data?.message ?? 'Erro ao carregar o ranking de jogos. Tente novamente.'
errorMessage.value =
error?.data?.message ?? 'Erro ao carregar o ranking de jogos. Tente novamente.'
$toast.error(errorMessage.value, { duration: 8000 })
} finally {
isLoading.value = false