web-next: migrar toda la UI al tema real nw-ryu
Reescritura completa del frontend Next.js del sistema visual Tailwind "simulado" al tema Django original (nw-ryu), para paridad pixel con la web actual antes del cutover. - Tema real: copia de static/nw-themes/nw-ryu + favicons a public/, el layout carga el novavow-style.css real de ultimo (gana la cascada sobre Tailwind) + Font Awesome. - Shell replicando los partials Django: SiteHeader, Video, Social, Footer, ServerClock; home con estructura real (main-page/middle-content/...). - Helpers reutilizables: PageShell (main-page > middle-content > body-content > title-content) y ServiceBox (title-box-content + back-to-account). - Paginas migradas a clases reales del tema (fieldset/tool-button/char-box/ item-box/info-box-light/max-center-table/alert-message/botones reales), eliminando el markup Tailwind (.nw-btn/.nw-card/.nw-input): auth (login/register/recover/reset/select-account/activate), cuenta + servicios de personaje (revive/unstuck/rename/customize/ change-race/change-faction/level-up/gold/transfer + pago Stripe), ajustes (change-password/change-email/security-token), comunidad (vote-points/recruit/battlepay), foro completo, y admin (indice + 7 secciones + los Admin*Manager). - Se conserva el bilingue (next-intl); claves nuevas en messages/es|en.json. Verificado: typecheck + build OK; rutas protegidas 307->login; sin MISSING_MESSAGE; cero Tailwind residual (solo .nw-tool-btn/.nw-page, clases propias en globals.css). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -3,6 +3,7 @@ import { getTranslations, setRequestLocale } from 'next-intl/server'
|
||||
import { Link } from '@/i18n/navigation'
|
||||
import { getForum, getTopics, countTopics } from '@/lib/forum'
|
||||
import { getSession } from '@/lib/session'
|
||||
import { PageShell } from '@/components/PageShell'
|
||||
import { NewTopicForm } from '@/components/NewTopicForm'
|
||||
import { Pagination } from '@/components/Pagination'
|
||||
|
||||
@@ -32,46 +33,50 @@ export default async function ForumPage({
|
||||
const canPost = Boolean(session.username)
|
||||
|
||||
return (
|
||||
<main className="mx-auto max-w-4xl px-4 py-8">
|
||||
<p className="mb-2 text-sm">
|
||||
<Link href="/forum" className="text-sky-400 hover:underline">
|
||||
← {t('backToForum')}
|
||||
</Link>
|
||||
</p>
|
||||
<h1 className="mb-1 text-2xl font-bold text-amber-500">{forum!.name}</h1>
|
||||
{forum!.description && <p className="mb-6 text-amber-200/60">{forum!.description}</p>}
|
||||
<PageShell title={forum!.name}>
|
||||
<div className="box-content">
|
||||
<div className="body-box-content">
|
||||
<p>
|
||||
<Link href="/forum">← {t('backToForum')}</Link>
|
||||
</p>
|
||||
{forum!.description && <p className="second-brown">{forum!.description}</p>}
|
||||
<br />
|
||||
|
||||
{topics.length === 0 ? (
|
||||
<p className="text-amber-200/70">{t('noTopics')}</p>
|
||||
) : (
|
||||
<ul className="divide-y divide-amber-900/40">
|
||||
{topics.map((topic) => (
|
||||
<li key={topic.id} className="flex items-center justify-between gap-4 py-3">
|
||||
<div>
|
||||
<Link href={`/forum/topic/${topic.id}`} className="font-semibold text-amber-300 hover:text-amber-400">
|
||||
{topic.sticky && <span className="mr-2 text-xs text-amber-500">[{t('sticky')}]</span>}
|
||||
{topic.locked && <span className="mr-2 text-xs text-red-400">[{t('locked')}]</span>}
|
||||
{topic.name}
|
||||
</Link>
|
||||
<p className="text-xs text-amber-200/60">
|
||||
{t('by')} {topic.poster}
|
||||
</p>
|
||||
</div>
|
||||
<div className="whitespace-nowrap text-xs text-amber-200/60">
|
||||
{topic.views} {t('views')}
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
{topics.length === 0 ? (
|
||||
<p className="second-brown centered">{t('noTopics')}</p>
|
||||
) : (
|
||||
<table className="max-center-table">
|
||||
<tbody>
|
||||
{topics.map((topic) => (
|
||||
<tr key={topic.id} className="team-center-table-tr">
|
||||
<td className="lefted separate">
|
||||
<Link href={`/forum/topic/${topic.id}`} className="yellow-info">
|
||||
{topic.sticky && <span className="second-yellow small-font">[{t('sticky')}] </span>}
|
||||
{topic.locked && <span className="red-info2 small-font">[{t('locked')}] </span>}
|
||||
{topic.name}
|
||||
</Link>
|
||||
<p className="third-brown small-font">
|
||||
{t('by')} {topic.poster}
|
||||
</p>
|
||||
</td>
|
||||
<td className="real-info-box no-wrap-td second-brown small-font">
|
||||
{topic.views} {t('views')}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
)}
|
||||
|
||||
<Pagination page={page} totalPages={totalPages} hrefFor={(p) => `/forum/${id}?page=${p}`} />
|
||||
<Pagination page={page} totalPages={totalPages} hrefFor={(p) => `/forum/${id}?page=${p}`} />
|
||||
|
||||
{canPost ? (
|
||||
<NewTopicForm forumId={id} />
|
||||
) : (
|
||||
<p className="mt-8 text-sm text-amber-200/60">{t('loginToPost')}</p>
|
||||
)}
|
||||
</main>
|
||||
{canPost ? (
|
||||
<NewTopicForm forumId={id} />
|
||||
) : (
|
||||
<p className="second-brown centered separate">{t('loginToPost')}</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</PageShell>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import { getTranslations, setRequestLocale } from 'next-intl/server'
|
||||
import { Link } from '@/i18n/navigation'
|
||||
import { getForumIndex } from '@/lib/forum'
|
||||
import { PageShell } from '@/components/PageShell'
|
||||
import { ForumSearchBox } from '@/components/ForumSearchBox'
|
||||
|
||||
export const dynamic = 'force-dynamic'
|
||||
@@ -12,43 +13,51 @@ export default async function ForumIndexPage({ params }: { params: Promise<{ loc
|
||||
const categories = await getForumIndex()
|
||||
|
||||
return (
|
||||
<main className="mx-auto max-w-4xl px-4 py-8">
|
||||
<h1 className="mb-6 text-2xl font-bold text-amber-500">{t('title')}</h1>
|
||||
<ForumSearchBox />
|
||||
{categories.length === 0 ? (
|
||||
<p className="text-amber-200/70">{t('noForums')}</p>
|
||||
) : (
|
||||
categories.map((cat) => (
|
||||
<section key={cat.id} className="mb-6">
|
||||
<h2 className="mb-2 border-b border-amber-900/60 pb-1 text-lg font-semibold text-amber-400">{cat.name}</h2>
|
||||
<ul className="divide-y divide-amber-900/40">
|
||||
{cat.forums.map((f) => (
|
||||
<li key={f.id} className="flex items-center justify-between gap-4 py-3">
|
||||
<div>
|
||||
<Link href={`/forum/${f.id}`} className="font-semibold text-amber-300 hover:text-amber-400">
|
||||
{f.name}
|
||||
</Link>
|
||||
{f.description && <p className="text-sm text-amber-200/60">{f.description}</p>}
|
||||
</div>
|
||||
<div className="whitespace-nowrap text-right text-xs text-amber-200/60">
|
||||
<div>
|
||||
{f.topic_count} {t('topics')} · {f.post_count} {t('posts')}
|
||||
</div>
|
||||
{f.last_topic_id && (
|
||||
<div className="mt-1">
|
||||
<Link href={`/forum/topic/${f.last_topic_id}`} className="text-sky-400 hover:underline">
|
||||
{f.last_topic_name}
|
||||
</Link>{' '}
|
||||
{t('by')} {f.last_topic_poster}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</section>
|
||||
))
|
||||
)}
|
||||
</main>
|
||||
<PageShell title={t('title')}>
|
||||
<div className="box-content">
|
||||
<div className="body-box-content">
|
||||
<ForumSearchBox />
|
||||
{categories.length === 0 ? (
|
||||
<p className="second-brown centered">{t('noForums')}</p>
|
||||
) : (
|
||||
categories.map((cat) => (
|
||||
<div key={cat.id}>
|
||||
<div className="title-content-h3">
|
||||
<h3 className="big-font">{cat.name}</h3>
|
||||
</div>
|
||||
<table className="max-center-table">
|
||||
<tbody>
|
||||
{cat.forums.map((f) => (
|
||||
<tr key={f.id} className="team-center-table-tr">
|
||||
<td className="lefted separate">
|
||||
<Link href={`/forum/${f.id}`} className="yellow-info">
|
||||
{f.name}
|
||||
</Link>
|
||||
{f.description && <p className="second-brown small-font">{f.description}</p>}
|
||||
</td>
|
||||
<td className="real-info-box no-wrap-td">
|
||||
<span className="second-brown small-font">
|
||||
{f.topic_count} {t('topics')} · {f.post_count} {t('posts')}
|
||||
</span>
|
||||
{f.last_topic_id && (
|
||||
<p className="small-font">
|
||||
<Link href={`/forum/topic/${f.last_topic_id}`}>{f.last_topic_name}</Link>{' '}
|
||||
<span className="third-brown">
|
||||
{t('by')} {f.last_topic_poster}
|
||||
</span>
|
||||
</p>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
<br />
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</PageShell>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import { getTranslations, setRequestLocale } from 'next-intl/server'
|
||||
import { Link } from '@/i18n/navigation'
|
||||
import { searchTopics, countSearchTopics } from '@/lib/forum'
|
||||
import { PageShell } from '@/components/PageShell'
|
||||
import { ForumSearchBox } from '@/components/ForumSearchBox'
|
||||
|
||||
export const dynamic = 'force-dynamic'
|
||||
@@ -23,47 +24,47 @@ export default async function ForumSearchPage({
|
||||
const total = valid ? await countSearchTopics(query) : 0
|
||||
|
||||
return (
|
||||
<main className="mx-auto max-w-4xl px-4 py-8">
|
||||
<p className="mb-2 text-sm">
|
||||
<Link href="/forum" className="text-sky-400 hover:underline">
|
||||
← {t('backToForum')}
|
||||
</Link>
|
||||
</p>
|
||||
<h1 className="mb-6 text-2xl font-bold text-amber-500">{t('search')}</h1>
|
||||
<ForumSearchBox initial={query} />
|
||||
<PageShell title={t('search')}>
|
||||
<div className="box-content">
|
||||
<div className="body-box-content">
|
||||
<p>
|
||||
<Link href="/forum">← {t('backToForum')}</Link>
|
||||
</p>
|
||||
<br />
|
||||
<ForumSearchBox initial={query} />
|
||||
|
||||
{!valid ? (
|
||||
<p className="text-amber-200/70">{t('searchHint')}</p>
|
||||
) : results.length === 0 ? (
|
||||
<p className="text-amber-200/70">{t('noResults', { query })}</p>
|
||||
) : (
|
||||
<>
|
||||
<p className="mb-4 text-sm text-amber-200/60">{t('resultsCount', { count: total, query })}</p>
|
||||
<ul className="divide-y divide-amber-900/40">
|
||||
{results.map((r) => (
|
||||
<li key={r.id} className="flex items-center justify-between gap-4 py-3">
|
||||
<div>
|
||||
<Link href={`/forum/topic/${r.id}`} className="font-semibold text-amber-300 hover:text-amber-400">
|
||||
{r.name}
|
||||
</Link>
|
||||
<p className="text-xs text-amber-200/60">
|
||||
{t('in')}{' '}
|
||||
<Link href={`/forum/${r.forum_id}`} className="text-sky-400 hover:underline">
|
||||
{r.forum_name}
|
||||
</Link>{' '}
|
||||
· {t('by')} {r.poster}
|
||||
</p>
|
||||
</div>
|
||||
{r.updated_at && (
|
||||
<span className="whitespace-nowrap text-xs text-amber-200/50">
|
||||
{new Date(r.updated_at).toLocaleDateString(locale)}
|
||||
</span>
|
||||
)}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</>
|
||||
)}
|
||||
</main>
|
||||
{!valid ? (
|
||||
<p className="second-brown centered">{t('searchHint')}</p>
|
||||
) : results.length === 0 ? (
|
||||
<p className="second-brown centered">{t('noResults', { query })}</p>
|
||||
) : (
|
||||
<>
|
||||
<p className="second-brown">{t('resultsCount', { count: total, query })}</p>
|
||||
<table className="max-center-table">
|
||||
<tbody>
|
||||
{results.map((r) => (
|
||||
<tr key={r.id} className="team-center-table-tr">
|
||||
<td className="lefted separate">
|
||||
<Link href={`/forum/topic/${r.id}`} className="yellow-info">
|
||||
{r.name}
|
||||
</Link>
|
||||
<p className="third-brown small-font">
|
||||
{t('in')} <Link href={`/forum/${r.forum_id}`}>{r.forum_name}</Link> · {t('by')} {r.poster}
|
||||
</p>
|
||||
</td>
|
||||
{r.updated_at && (
|
||||
<td className="real-info-box no-wrap-td third-brown small-font">
|
||||
{new Date(r.updated_at).toLocaleDateString(locale)}
|
||||
</td>
|
||||
)}
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</PageShell>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -4,6 +4,7 @@ import { Link } from '@/i18n/navigation'
|
||||
import { getTopic, getPosts, countPosts, listForumsForMove } from '@/lib/forum'
|
||||
import { getSession } from '@/lib/session'
|
||||
import { forumIsModerator, canEditPost } from '@/lib/forum-perm'
|
||||
import { PageShell } from '@/components/PageShell'
|
||||
import { ReplyForm } from '@/components/ReplyForm'
|
||||
import { PostActions } from '@/components/PostActions'
|
||||
import { TopicModBar } from '@/components/TopicModBar'
|
||||
@@ -36,73 +37,71 @@ export default async function TopicPage({
|
||||
const moveForums = isMod ? (await listForumsForMove()).filter((f) => f.id !== topic!.forum_id) : []
|
||||
const canReply = Boolean(session.username) && (!topic!.locked || isMod)
|
||||
|
||||
const title = (
|
||||
<>
|
||||
{topic!.sticky && <span className="second-yellow">[{t('pinned')}] </span>}
|
||||
{topic!.locked && <span className="red-info2">[{t('locked')}] </span>}
|
||||
{topic!.deleted && <span className="red-info2">[{t('deletedMark')}] </span>}
|
||||
{topic!.name}
|
||||
</>
|
||||
)
|
||||
|
||||
return (
|
||||
<main className="mx-auto max-w-4xl px-4 py-8">
|
||||
<p className="mb-2 text-sm">
|
||||
<Link href="/forum" className="text-sky-400 hover:underline">
|
||||
← {t('backToForum')}
|
||||
</Link>
|
||||
</p>
|
||||
<h1 className="mb-4 text-2xl font-bold text-amber-500">
|
||||
{topic!.sticky && <span className="mr-2 text-sm text-nw-gold-light">[{t('pinned')}]</span>}
|
||||
{topic!.locked && <span className="mr-2 text-sm text-red-400">[{t('locked')}]</span>}
|
||||
{topic!.deleted && <span className="mr-2 text-sm text-red-400">[{t('deletedMark')}]</span>}
|
||||
{topic!.name}
|
||||
</h1>
|
||||
<PageShell title={title}>
|
||||
<div className="box-content">
|
||||
<div className="body-box-content">
|
||||
<p>
|
||||
<Link href="/forum">← {t('backToForum')}</Link>
|
||||
</p>
|
||||
<br />
|
||||
|
||||
{isMod && (
|
||||
<TopicModBar
|
||||
topicId={id}
|
||||
locked={topic!.locked}
|
||||
sticky={topic!.sticky}
|
||||
deleted={topic!.deleted}
|
||||
moveForums={moveForums}
|
||||
/>
|
||||
)}
|
||||
{isMod && (
|
||||
<TopicModBar
|
||||
topicId={id}
|
||||
locked={topic!.locked}
|
||||
sticky={topic!.sticky}
|
||||
deleted={topic!.deleted}
|
||||
moveForums={moveForums}
|
||||
/>
|
||||
)}
|
||||
|
||||
<div className="space-y-4">
|
||||
{posts.map((post) => (
|
||||
<article key={post.id} className={`nw-card ${post.deleted ? 'opacity-50 ring-1 ring-red-900/50' : ''}`}>
|
||||
<div className="mb-2 flex items-center justify-between border-b border-amber-900/40 pb-2 text-sm">
|
||||
<span className="font-semibold text-amber-400">
|
||||
<Link href={`/forum/user/${encodeURIComponent(post.poster)}`} className="hover:text-amber-300 hover:underline">
|
||||
{post.poster}
|
||||
</Link>
|
||||
{post.deleted && <span className="ml-2 text-xs text-red-400">[{t('deletedMark')}]</span>}
|
||||
</span>
|
||||
{post.time && (
|
||||
<span className="text-amber-200/50">
|
||||
{new Date(post.time).toLocaleString(locale)}
|
||||
{post.edited && <span className="ml-2 italic text-amber-200/40">· {t('editedMark')}</span>}
|
||||
{posts.map((post) => (
|
||||
<div key={post.id} className="inline-div" style={{ display: 'block', opacity: post.deleted ? 0.5 : 1 }}>
|
||||
<div className="lefted">
|
||||
<span className="yellow-info">
|
||||
<Link href={`/forum/user/${encodeURIComponent(post.poster)}`}>{post.poster}</Link>
|
||||
{post.deleted && <span className="red-info2 small-font"> [{t('deletedMark')}]</span>}
|
||||
</span>
|
||||
{post.time && (
|
||||
<span className="date third-brown small-font">
|
||||
{new Date(post.time).toLocaleString(locale)}
|
||||
{post.edited && <span className="grey-info2"> · {t('editedMark')}</span>}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<hr />
|
||||
<div className="post-content" dangerouslySetInnerHTML={{ __html: post.text }} />
|
||||
{canEditPost(session, isMod, post.poster_id) && (
|
||||
<PostActions postId={post.id} initialText={post.text} deleted={post.deleted} />
|
||||
)}
|
||||
</div>
|
||||
<div
|
||||
className="prose prose-invert max-w-none text-sm"
|
||||
dangerouslySetInnerHTML={{ __html: post.text }}
|
||||
/>
|
||||
{canEditPost(session, isMod, post.poster_id) && (
|
||||
<PostActions postId={post.id} initialText={post.text} deleted={post.deleted} />
|
||||
)}
|
||||
</article>
|
||||
))}
|
||||
))}
|
||||
|
||||
<Pagination page={page} totalPages={totalPages} hrefFor={(p) => `/forum/topic/${id}?page=${p}`} />
|
||||
|
||||
{canReply ? (
|
||||
page === totalPages ? (
|
||||
<ReplyForm topicId={id} />
|
||||
) : (
|
||||
<p className="separate">
|
||||
<Link href={`/forum/topic/${id}?page=${totalPages}`}>{t('replyOnLastPage')}</Link>
|
||||
</p>
|
||||
)
|
||||
) : (
|
||||
!session.username && <p className="second-brown centered separate">{t('loginToPost')}</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Pagination page={page} totalPages={totalPages} hrefFor={(p) => `/forum/topic/${id}?page=${p}`} />
|
||||
|
||||
{canReply ? (
|
||||
page === totalPages ? (
|
||||
<ReplyForm topicId={id} />
|
||||
) : (
|
||||
<p className="mt-6 text-sm">
|
||||
<Link href={`/forum/topic/${id}?page=${totalPages}`} className="text-sky-400 hover:underline">
|
||||
{t('replyOnLastPage')}
|
||||
</Link>
|
||||
</p>
|
||||
)
|
||||
) : (
|
||||
!session.username && <p className="mt-6 text-sm text-amber-200/60">{t('loginToPost')}</p>
|
||||
)}
|
||||
</main>
|
||||
</PageShell>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import { getTranslations, setRequestLocale } from 'next-intl/server'
|
||||
import { Link } from '@/i18n/navigation'
|
||||
import { getForumProfile } from '@/lib/forum'
|
||||
import { PageShell } from '@/components/PageShell'
|
||||
|
||||
export const dynamic = 'force-dynamic'
|
||||
|
||||
@@ -14,55 +15,69 @@ export default async function ForumProfilePage({
|
||||
const t = await getTranslations('Forum')
|
||||
const p = await getForumProfile(decodeURIComponent(username))
|
||||
|
||||
return (
|
||||
<main className="mx-auto max-w-2xl px-4 py-8">
|
||||
<p className="mb-2 text-sm">
|
||||
<Link href="/forum" className="text-sky-400 hover:underline">
|
||||
← {t('backToForum')}
|
||||
</Link>
|
||||
</p>
|
||||
const title = (
|
||||
<>
|
||||
{p.username}
|
||||
{p.status && (
|
||||
<span className="second-yellow small-font"> [{p.status === 'admin' ? t('roleAdmin') : t('roleGm')}]</span>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
|
||||
<div className="nw-card">
|
||||
<h1 className="flex items-center gap-2 text-2xl font-bold text-amber-500">
|
||||
{p.username}
|
||||
{p.status && (
|
||||
<span className="rounded bg-nw-gold/15 px-2 py-0.5 text-xs text-nw-gold-light">
|
||||
{p.status === 'admin' ? t('roleAdmin') : t('roleGm')}
|
||||
</span>
|
||||
return (
|
||||
<PageShell title={title}>
|
||||
<div className="box-content">
|
||||
<div className="body-box-content">
|
||||
<p>
|
||||
<Link href="/forum">← {t('backToForum')}</Link>
|
||||
</p>
|
||||
<br />
|
||||
<table className="max-center-table info-box-light">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td className="centered separate">
|
||||
<span className="second-brown">{t('posts')}</span>
|
||||
<br />
|
||||
<span className="yellow-info big-font">{p.postCount}</span>
|
||||
</td>
|
||||
<td className="centered separate">
|
||||
<span className="second-brown">{t('topics')}</span>
|
||||
<br />
|
||||
<span className="yellow-info big-font">{p.topicCount}</span>
|
||||
</td>
|
||||
<td className="centered separate">
|
||||
<span className="second-brown">{t('memberSince')}</span>
|
||||
<br />
|
||||
<span className="yellow-info">
|
||||
{p.joindate ? new Date(p.joindate).toLocaleDateString(locale) : '—'}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
{p.recentTopics.length > 0 && (
|
||||
<>
|
||||
<div className="title-content-h3">
|
||||
<h3 className="big-font">{t('recentTopics')}</h3>
|
||||
</div>
|
||||
<table className="max-center-table">
|
||||
<tbody>
|
||||
{p.recentTopics.map((topic) => (
|
||||
<tr key={topic.id} className="team-center-table-tr">
|
||||
<td className="lefted separate">
|
||||
<Link href={`/forum/topic/${topic.id}`} className="yellow-info">
|
||||
{topic.name}
|
||||
</Link>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</>
|
||||
)}
|
||||
</h1>
|
||||
<div className="mt-4 grid grid-cols-2 gap-3 text-sm sm:grid-cols-3">
|
||||
<div>
|
||||
<p className="text-nw-muted">{t('posts')}</p>
|
||||
<p className="text-lg font-semibold text-amber-300">{p.postCount}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-nw-muted">{t('topics')}</p>
|
||||
<p className="text-lg font-semibold text-amber-300">{p.topicCount}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-nw-muted">{t('memberSince')}</p>
|
||||
<p className="font-semibold text-amber-300">
|
||||
{p.joindate ? new Date(p.joindate).toLocaleDateString(locale) : '—'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{p.recentTopics.length > 0 && (
|
||||
<section className="mt-6">
|
||||
<h2 className="mb-3 text-lg font-semibold text-nw-gold-light">{t('recentTopics')}</h2>
|
||||
<ul className="divide-y divide-amber-900/40">
|
||||
{p.recentTopics.map((topic) => (
|
||||
<li key={topic.id} className="py-2">
|
||||
<Link href={`/forum/topic/${topic.id}`} className="text-amber-300 hover:text-amber-400">
|
||||
{topic.name}
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</section>
|
||||
)}
|
||||
</main>
|
||||
</PageShell>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user