style: atualiza todo design interno da aplicacao
This commit is contained in:
@@ -10,11 +10,6 @@
|
||||
class="m-0 inline-flex rounded-full bg-[rgba(196,184,232,0.6)] px-3 py-1 text-xs font-semibold uppercase leading-[1.4] tracking-[0.96px] text-[#0c0a09]">
|
||||
Catálogo
|
||||
</p>
|
||||
|
||||
<NuxtLink to="/catalogo"
|
||||
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>
|
||||
|
||||
<div v-if="isLoading" class="grid gap-4" role="status" aria-live="polite">
|
||||
@@ -52,8 +47,19 @@
|
||||
:aria-label="isFavorited ? 'Remover dos favoritos' : 'Adicionar aos favoritos'"
|
||||
@click="toggleFavorite"
|
||||
class="inline-flex h-9 items-center justify-center gap-2 rounded-full border border-[#e7e5e4] px-4 text-[13px] font-medium transition hover:bg-[#f0efed] disabled:cursor-not-allowed disabled:opacity-50">
|
||||
<Icon :name="togglingFavorite ? 'mdi:loading' : isFavorited ? 'mdi:heart' : 'mdi:heart-outline'"
|
||||
:class="['text-sm', togglingFavorite ? 'animate-spin text-[#777169]' : isFavorited ? 'text-rose-500' : 'text-[#777169]']" />
|
||||
<Icon :name="togglingFavorite
|
||||
? 'mdi:loading'
|
||||
: isFavorited
|
||||
? 'mdi:heart'
|
||||
: 'mdi:heart-outline'
|
||||
" :class="[
|
||||
'text-sm',
|
||||
togglingFavorite
|
||||
? 'animate-spin text-[#777169]'
|
||||
: isFavorited
|
||||
? 'text-rose-500'
|
||||
: 'text-[#777169]'
|
||||
]" />
|
||||
<span>{{ isFavorited ? 'Favoritado' : 'Favoritar' }}</span>
|
||||
</button>
|
||||
|
||||
@@ -85,14 +91,18 @@
|
||||
|
||||
<div v-if="!isEditing" class="grid gap-6">
|
||||
<div>
|
||||
<p class="mb-1 text-xs font-semibold uppercase leading-[1.4] tracking-[0.96px] text-[#777169]">Descrição
|
||||
<p class="mb-1 text-xs font-semibold uppercase leading-[1.4] tracking-[0.96px] text-[#777169]">
|
||||
Descrição
|
||||
</p>
|
||||
<p class="text-[15px] leading-[1.6] tracking-[0.15px] text-[#0c0a09]">
|
||||
{{ game.description }}
|
||||
</p>
|
||||
<p class="text-[15px] leading-[1.6] tracking-[0.15px] text-[#0c0a09]">{{ game.description }}</p>
|
||||
</div>
|
||||
|
||||
<div class="grid gap-5 sm:grid-cols-2">
|
||||
<div>
|
||||
<p class="mb-2 text-xs font-semibold uppercase leading-[1.4] tracking-[0.96px] text-[#777169]">Gêneros
|
||||
<p class="mb-2 text-xs font-semibold uppercase leading-[1.4] tracking-[0.96px] text-[#777169]">
|
||||
Gêneros
|
||||
</p>
|
||||
<div class="flex flex-wrap gap-1.5">
|
||||
<span v-for="genre in game.genres" :key="genre"
|
||||
@@ -104,7 +114,8 @@
|
||||
|
||||
<div>
|
||||
<p class="mb-2 text-xs font-semibold uppercase leading-[1.4] tracking-[0.96px] text-[#777169]">
|
||||
Plataformas</p>
|
||||
Plataformas
|
||||
</p>
|
||||
<div class="flex flex-wrap gap-1.5">
|
||||
<span v-for="platform in game.platforms" :key="platform"
|
||||
class="inline-flex items-center rounded-full bg-[rgba(167,229,211,0.5)] px-2.5 py-1 text-[12px] font-semibold uppercase leading-none tracking-[0.8px] text-[#0c0a09]">
|
||||
@@ -114,11 +125,14 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="game.system_requirements?.cpu || game.system_requirements?.gpu || game.system_requirements?.ram"
|
||||
class="rounded-xl border border-[#e7e5e4] bg-[#fafafa] p-4">
|
||||
<div v-if="
|
||||
game.system_requirements?.cpu ||
|
||||
game.system_requirements?.gpu ||
|
||||
game.system_requirements?.ram
|
||||
" class="rounded-xl border border-[#e7e5e4] bg-[#fafafa] p-4">
|
||||
<p class="mb-3 text-xs font-semibold uppercase leading-[1.4] tracking-[0.96px] text-[#777169]">
|
||||
Requisitos de sistema</p>
|
||||
Requisitos de sistema
|
||||
</p>
|
||||
<dl class="grid gap-2">
|
||||
<div v-if="game.system_requirements.cpu" class="flex gap-3">
|
||||
<dt class="w-10 shrink-0 text-[13px] font-semibold text-[#777169]">CPU</dt>
|
||||
@@ -136,9 +150,14 @@
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-2">
|
||||
<span :class="['inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-xs font-semibold uppercase tracking-[0.8px]',
|
||||
game.active ? 'bg-emerald-50 text-emerald-700' : 'bg-[#f0efed] text-[#777169]']">
|
||||
<span :class="['h-1.5 w-1.5 rounded-full', game.active ? 'bg-emerald-500' : 'bg-[#d6d3d1]']"></span>
|
||||
<span :class="[
|
||||
'inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-xs font-semibold uppercase tracking-[0.8px]',
|
||||
game.active ? 'bg-emerald-50 text-emerald-700' : 'bg-[#f0efed] text-[#777169]'
|
||||
]">
|
||||
<span :class="[
|
||||
'h-1.5 w-1.5 rounded-full',
|
||||
game.active ? 'bg-emerald-500' : 'bg-[#d6d3d1]'
|
||||
]"></span>
|
||||
{{ game.active ? 'Ativo' : 'Inativo' }}
|
||||
</span>
|
||||
</div>
|
||||
@@ -250,8 +269,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://catalogo-jogos-sd-production.up.railway.app</span>
|
||||
Microsserviço consumido:
|
||||
<span class="font-medium text-[#4e4e4e]">https://catalogo-jogos-sd-production.up.railway.app</span>
|
||||
· Feito por Lucas Kauã
|
||||
</p>
|
||||
<span class="inline-flex items-center gap-1.5">
|
||||
@@ -266,7 +285,8 @@
|
||||
|
||||
<script setup>
|
||||
definePageMeta({
|
||||
middleware: 'auth'
|
||||
middleware: 'auth',
|
||||
layout: 'protected'
|
||||
})
|
||||
|
||||
const CATALOG_API_BASE_URL = 'https://catalogo-jogos-sd-production.up.railway.app'
|
||||
@@ -340,9 +360,12 @@ async function fetchGame() {
|
||||
errorMessage.value = ''
|
||||
|
||||
try {
|
||||
const data = await $fetch(`${CATALOG_API_BASE_URL}/api/v1/catalog/games/${route.params.id_ou_slug}`, {
|
||||
headers: { Authorization: `Bearer ${token.value}` }
|
||||
})
|
||||
const data = await $fetch(
|
||||
`${CATALOG_API_BASE_URL}/api/v1/catalog/games/${route.params.id_ou_slug}`,
|
||||
{
|
||||
headers: { Authorization: `Bearer ${token.value}` }
|
||||
}
|
||||
)
|
||||
game.value = data?.data ?? null
|
||||
|
||||
if (!game.value) {
|
||||
@@ -370,7 +393,9 @@ async function fetchFavoriteStatus() {
|
||||
const data = await $fetch(`${WISHLIST_API_BASE_URL}/api/wishlist`, {
|
||||
headers: { Authorization: `Bearer ${token.value}` }
|
||||
})
|
||||
const favorites = (data?.data ?? []).filter((item) => item.is_favorite === 1 || item.is_favorite === true)
|
||||
const favorites = (data?.data ?? []).filter(
|
||||
(item) => item.is_favorite === 1 || item.is_favorite === true
|
||||
)
|
||||
isFavorited.value = favorites.some((item) => item.game_id === game.value.title)
|
||||
} catch {
|
||||
// falha silenciosa
|
||||
@@ -430,8 +455,18 @@ async function saveEdit() {
|
||||
title: editForm.title || undefined,
|
||||
description: editForm.description || undefined,
|
||||
developer: editForm.developer || undefined,
|
||||
genres: editForm.genresRaw ? editForm.genresRaw.split(',').map((s) => s.trim()).filter(Boolean) : undefined,
|
||||
platforms: editForm.platformsRaw ? editForm.platformsRaw.split(',').map((s) => s.trim()).filter(Boolean) : undefined,
|
||||
genres: editForm.genresRaw
|
||||
? editForm.genresRaw
|
||||
.split(',')
|
||||
.map((s) => s.trim())
|
||||
.filter(Boolean)
|
||||
: undefined,
|
||||
platforms: editForm.platformsRaw
|
||||
? editForm.platformsRaw
|
||||
.split(',')
|
||||
.map((s) => s.trim())
|
||||
.filter(Boolean)
|
||||
: undefined,
|
||||
active: editForm.active
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user