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

89
app/pages/(protected)/catalogo/[id_ou_slug].vue
View File

@@ -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>
&nbsp;·&nbsp; 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
}

24
app/pages/(protected)/catalogo/criar.vue
View File

@@ -19,11 +19,6 @@
Preencha os dados para adicionar um jogo ao catálogo.
</p>
</div>
<NuxtLink to="/catalogo"
class="inline-flex h-10 shrink-0 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>
<form
@@ -100,7 +95,8 @@
class="inline-flex min-h-6 items-center rounded-full bg-[rgba(196,184,232,0.4)] px-2.5 py-1 text-xs font-semibold uppercase leading-none tracking-[0.96px] text-[#0c0a09]">
Imagens
</span>
<p class="mb-4 mt-3 text-[13px] leading-[1.5] text-[#777169]">Opcional — URLs públicas das imagens do jogo.
<p class="mb-4 mt-3 text-[13px] leading-[1.5] text-[#777169]">
Opcional — URLs públicas das imagens do jogo.
</p>
<div class="grid gap-5 md:grid-cols-2">
@@ -179,7 +175,8 @@
<script setup>
definePageMeta({
middleware: 'auth'
middleware: 'auth',
layout: 'protected'
})
const CATALOG_API_BASE_URL = 'https://catalogo-jogos-sd-production.up.railway.app'
@@ -216,8 +213,14 @@ const clearToken = () => {
async function submitForm() {
formError.value = ''
const genres = form.genresRaw.split(',').map((s) => s.trim()).filter(Boolean)
const platforms = form.platformsRaw.split(',').map((s) => s.trim()).filter(Boolean)
const genres = form.genresRaw
.split(',')
.map((s) => s.trim())
.filter(Boolean)
const platforms = form.platformsRaw
.split(',')
.map((s) => s.trim())
.filter(Boolean)
if (!form.title || !form.description || !form.developer || !genres.length || !platforms.length) {
formError.value = 'Preencha todos os campos obrigatórios.'
@@ -271,7 +274,8 @@ async function submitForm() {
return
}
formError.value = error?.data?.message ?? 'Erro ao criar o jogo. Verifique os dados e tente novamente.'
formError.value =
error?.data?.message ?? 'Erro ao criar o jogo. Verifique os dados e tente novamente.'
$toast.error(formError.value, { duration: 8000 })
} finally {
isSubmitting.value = false

36
app/pages/(protected)/catalogo/index.vue
View File

@@ -26,10 +26,6 @@
<Icon name="mdi:plus" class="text-base" />
Novo jogo
</NuxtLink>
<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>
</div>
</header>
@@ -71,13 +67,22 @@
<Icon name="mdi:gamepad-variant-outline" class="text-4xl text-[#d6d3d1]" />
</div>
<button type="button" :disabled="togglingId === game.title"
:aria-label="favoriteIds.has(game.title) ? 'Remover dos favoritos' : 'Adicionar aos favoritos'"
@click="toggleFavorite(game)"
<button type="button" :disabled="togglingId === game.title" :aria-label="favoriteIds.has(game.title) ? 'Remover dos favoritos' : 'Adicionar aos favoritos'
" @click="toggleFavorite(game)"
class="absolute right-2 top-2 inline-flex h-8 w-8 items-center justify-center rounded-full bg-white/80 shadow backdrop-blur-sm transition hover:bg-white disabled:cursor-not-allowed disabled:opacity-50">
<Icon
:name="togglingId === game.title ? 'mdi:loading' : favoriteIds.has(game.title) ? 'mdi:heart' : 'mdi:heart-outline'"
:class="['text-base', togglingId === game.title ? 'animate-spin text-[#777169]' : favoriteIds.has(game.title) ? 'text-rose-500' : 'text-[#777169]']" />
<Icon :name="togglingId === game.title
? 'mdi:loading'
: favoriteIds.has(game.title)
? 'mdi:heart'
: 'mdi:heart-outline'
" :class="[
'text-base',
togglingId === game.title
? 'animate-spin text-[#777169]'
: favoriteIds.has(game.title)
? 'text-rose-500'
: 'text-[#777169]'
]" />
</button>
</div>
@@ -134,8 +139,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>
&nbsp;·&nbsp; Feito por Lucas Kauã
</p>
<span class="inline-flex items-center gap-1.5">
@@ -149,7 +154,8 @@
<script setup>
definePageMeta({
middleware: 'auth'
middleware: 'auth',
layout: 'protected'
})
const CATALOG_API_BASE_URL = 'https://catalogo-jogos-sd-production.up.railway.app'
@@ -299,7 +305,9 @@ async function confirmDelete(game) {
confirmingDeleteId.value = null
$toast.success(`${game.title} removido do catálogo.`, { duration: 4000 })
} catch (error) {
$toast.error(error?.data?.message ?? 'Erro ao remover o jogo. Tente novamente.', { duration: 6000 })
$toast.error(error?.data?.message ?? 'Erro ao remover o jogo. Tente novamente.', {
duration: 6000
})
} finally {
deletingId.value = null
}