Inna
3e47a3d240
Reemplazo masivo de los estilos sueltos repetidos por las clases del sistema visual en ~20 componentes/páginas (auth, cuenta, servicios de personaje, foro, admin, voto): - inputs -> .nw-input, botones primarios -> .nw-btn, tarjetas -> .nw-card. Cohesión visual completa con la home y la cabecera. Verificado: build OK, páginas clave 200/redirect correctos, clases aplicadas. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
74 lines
2.8 KiB
TypeScript
74 lines
2.8 KiB
TypeScript
'use client'
|
|
|
|
import { useState } from 'react'
|
|
import { useTranslations } from 'next-intl'
|
|
import type { VoteSite } from '@/lib/vote'
|
|
|
|
export function VotePanel({ sites, canVote }: { sites: VoteSite[]; canVote: boolean }) {
|
|
const t = useTranslations('Vote')
|
|
const [busyId, setBusyId] = useState<number | null>(null)
|
|
const [message, setMessage] = useState<{ ok: boolean; text: string } | null>(null)
|
|
|
|
async function vote(site: VoteSite) {
|
|
if (busyId !== null) return
|
|
window.open(site.url, '_blank', 'noopener,noreferrer')
|
|
setBusyId(site.id)
|
|
setMessage(null)
|
|
try {
|
|
const res = await fetch('/api/vote', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
credentials: 'same-origin',
|
|
body: JSON.stringify({ url: site.url }),
|
|
})
|
|
const d: { success?: boolean; error?: string; points?: number; siteName?: string; hours?: number; minutes?: number } =
|
|
await res.json()
|
|
if (d.success) {
|
|
setMessage({ ok: true, text: t('success', { site: d.siteName ?? site.name, points: d.points ?? 0 }) })
|
|
} else if (d.error === 'cooldown') {
|
|
setMessage({ ok: false, text: t('cooldown', { hours: d.hours ?? 0, minutes: d.minutes ?? 0 }) })
|
|
} else {
|
|
setMessage({ ok: false, text: t(d.error === 'siteNotFound' ? 'siteNotFound' : 'genericError') })
|
|
}
|
|
} catch {
|
|
setMessage({ ok: false, text: t('genericError') })
|
|
} finally {
|
|
setBusyId(null)
|
|
}
|
|
}
|
|
|
|
if (sites.length === 0) return <p className="text-amber-200/70">{t('noSites')}</p>
|
|
|
|
return (
|
|
<>
|
|
<div className="flex flex-wrap justify-center gap-4">
|
|
{sites.map((s) => (
|
|
<div key={s.id} className="w-40 nw-card p-3 text-center">
|
|
{s.image_url && <img src={s.image_url} alt={s.name} className="mx-auto mb-2 max-h-16" />}
|
|
<p className="font-semibold text-amber-300">{s.name}</p>
|
|
<p className="mb-2 text-xs text-amber-200/60">
|
|
{s.points} {t('pv')}
|
|
</p>
|
|
{canVote ? (
|
|
<button
|
|
type="button"
|
|
onClick={() => vote(s)}
|
|
disabled={busyId !== null}
|
|
className="w-full rounded bg-amber-600 px-3 py-1 text-sm font-semibold text-[#1b120b] disabled:opacity-60"
|
|
>
|
|
{busyId === s.id ? t('voting') : t('vote')}
|
|
</button>
|
|
) : (
|
|
<a href={s.url} target="_blank" rel="noopener noreferrer" className="text-sm text-sky-400 hover:underline">
|
|
{t('vote')}
|
|
</a>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
{message && <p className={`mt-4 text-center ${message.ok ? 'text-green-400' : 'text-red-400'}`}>{message.text}</p>}
|
|
{!canVote && <p className="mt-4 text-center text-sm text-amber-200/60">{t('loginToVote')}</p>}
|
|
</>
|
|
)
|
|
}
|