Inna
5a903ef627
Replica el bloque Novedades del diseño original: fieldset plegable con el changelog (Noviembre 2024) y sus objetos enlazados a wowhead (icono zamimg tiny + color por calidad). components/StoreNews.tsx (client, toggle con flecha rotate/rotate2 del tema), incluido en la caja de info de /store. i18n Store.newsTitle/newsIntro/newsDate (es/en). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
74 lines
3.9 KiB
TypeScript
74 lines
3.9 KiB
TypeScript
'use client'
|
|
|
|
import { useState } from 'react'
|
|
import { useTranslations } from 'next-intl'
|
|
import { WowheadLink } from '@/components/WowheadLink'
|
|
import { wowheadIcon } from '@/lib/wowhead'
|
|
|
|
interface NewsEntry {
|
|
itemId?: number // si falta, es texto plano (un set sin enlace)
|
|
name: string
|
|
icon?: string
|
|
q?: number // calidad (color): 2 raro, 3 épico(sup), 4 legendario...
|
|
path: string[] // ruta de categorías donde se añadió
|
|
}
|
|
|
|
// Changelog de la tienda (Noviembre 2024), tal cual el diseño original.
|
|
const ENTRIES: NewsEntry[] = [
|
|
{ name: 'Equipo de Batalla del Iluminado de la Fuente del Sol', path: ['Sets de transfiguración PvE', 'Varios (Placas)'] },
|
|
{ itemId: 12636, name: 'Yelmo del gran jefe', icon: 'inv_helmet_24', q: 3, path: ['Sets de transfiguración PvE', 'Varios (Malla)', 'Miscelánea'] },
|
|
{ itemId: 19854, name: "Zin'rokh, Destructora de Mundos", icon: 'inv_sword_55', q: 4, path: ['Armas de transfiguración PvE', 'Espadas', 'Dos manos'] },
|
|
{ itemId: 40400, name: 'Muralla de terror', icon: 'inv_shield_32', q: 4, path: ['Armas de transfiguración PvE', 'Escudos'] },
|
|
{ itemId: 43988, name: 'Capa a prueba de vendavales', icon: 'inv_misc_cape_20', q: 4, path: ['Accesorios de transfiguración PvE', 'Capas'] },
|
|
{ itemId: 40205, name: 'Cinturón de piel de acechador', icon: 'inv_belt_15', q: 4, path: ['Accesorios de transfiguración PvE', 'Cinturones de cuero'] },
|
|
{ itemId: 8312, name: 'Coraza de alabastro', icon: 'inv_chest_chain_05', q: 2, path: ['Sets de transfiguración PvE', 'Varios (Placas)', 'Miscelánea'] },
|
|
{ itemId: 28782, name: 'Bastón de pulso de corazón de diamante', icon: 'inv_staff_53', q: 4, path: ['Armas de transfiguración PvE', 'Bastones'] },
|
|
{ itemId: 45117, name: 'Manijas de constructor', icon: 'inv_gauntlets_64', q: 4, path: ['Sets de transfiguración PvE', 'Varios (Tela)', 'Miscelánea'] },
|
|
{ itemId: 32323, name: 'Mantón de destructor de Sombraluna', icon: 'inv_misc_cape_naxxramas_02', q: 4, path: ['Accesorios de transfiguración PvE', 'Capas'] },
|
|
{ itemId: 32331, name: 'Capa del Consejo Illidari', icon: 'inv_misc_cape_20', q: 4, path: ['Accesorios de transfiguración PvE', 'Capas'] },
|
|
{ itemId: 34012, name: 'Embozo de la batalla final', icon: 'inv_misc_cape_16', q: 4, path: ['Accesorios de transfiguración PvE', 'Capas'] },
|
|
{ itemId: 32505, name: 'Locura de El Traidor', icon: 'spell_shadow_charm', q: 4, path: ['Accesorios PvE', 'Abalorios', 'Nivel de objeto < 200'] },
|
|
]
|
|
|
|
/** Sección plegable «Novedades» de la tienda (changelog), con enlaces a wowhead. */
|
|
export function StoreNews() {
|
|
const t = useTranslations('Store')
|
|
const [open, setOpen] = useState(false)
|
|
|
|
return (
|
|
<fieldset className="separate2">
|
|
<div id="store-news" role="button" tabIndex={0} onClick={() => setOpen((o) => !o)}>
|
|
<p className="blue-info">
|
|
{t('newsTitle')} <i className={`fas fa-angle-down green-info ${open ? 'rotate' : 'rotate2'}`} />
|
|
</p>
|
|
</div>
|
|
{open && (
|
|
<div id="store-news-content">
|
|
<p>{t('newsIntro')}</p>
|
|
<p><span className="second-brown">{t('newsDate')}</span></p>
|
|
<ul>
|
|
{ENTRIES.map((e, i) => (
|
|
<li key={i}>
|
|
{e.itemId ? (
|
|
<WowheadLink
|
|
id={e.itemId}
|
|
className={`icontinyl${e.q ? ` q${e.q}` : ''}`}
|
|
style={{ paddingLeft: '18px', background: `url("${wowheadIcon(e.icon || 'inv_misc_questionmark', 'tiny')}") left center no-repeat` }}
|
|
>
|
|
{e.name}
|
|
</WowheadLink>
|
|
) : (
|
|
<span>{e.name}</span>
|
|
)}
|
|
{e.path.map((p, j) => (
|
|
<span key={j}> <i className="fas fa-angle-right green-info" /> {p}</span>
|
|
))}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
)}
|
|
</fieldset>
|
|
)
|
|
}
|