Add Forum page with layout, mock data, and routing; update navigation and localization
This commit is contained in:
@@ -21,7 +21,7 @@ function Nav({ currentPage }: NavProps) {
|
|||||||
<Link to="/servers" className={currentPage === 'servers' ? 'active' : ''}>{t('nav.servers')}</Link>
|
<Link to="/servers" className={currentPage === 'servers' ? 'active' : ''}>{t('nav.servers')}</Link>
|
||||||
<Link to="/blog" className={currentPage === 'blog' ? 'active' : ''}>{t('nav.blog')}</Link>
|
<Link to="/blog" className={currentPage === 'blog' ? 'active' : ''}>{t('nav.blog')}</Link>
|
||||||
<a href="https://git.cialloo.com" className={currentPage === 'git' ? 'active' : ''}>{t('nav.git')}</a>
|
<a href="https://git.cialloo.com" className={currentPage === 'git' ? 'active' : ''}>{t('nav.git')}</a>
|
||||||
<a href="/#forum" className={currentPage === 'forum' ? 'active' : ''}>{t('nav.forum')}</a>
|
<Link to="/forum" className={currentPage === 'forum' ? 'active' : ''}>{t('nav.forum')}</Link>
|
||||||
<Link to="/friends" className={currentPage === 'friends' ? 'active' : ''}>{t('nav.friends')}</Link>
|
<Link to="/friends" className={currentPage === 'friends' ? 'active' : ''}>{t('nav.friends')}</Link>
|
||||||
<ThemeToggle />
|
<ThemeToggle />
|
||||||
<LanguageSelector />
|
<LanguageSelector />
|
||||||
|
|||||||
@@ -87,6 +87,25 @@
|
|||||||
"regions": "Regions",
|
"regions": "Regions",
|
||||||
"uptime": "Uptime"
|
"uptime": "Uptime"
|
||||||
},
|
},
|
||||||
|
"forum": {
|
||||||
|
"title": "Community Forum",
|
||||||
|
"subtitle": "Connect with fellow Counter-Strike players, share strategies, and discuss the latest updates",
|
||||||
|
"createThread": "Create New Thread",
|
||||||
|
"categories": "Forum Categories",
|
||||||
|
"threads": "threads",
|
||||||
|
"posts": "posts",
|
||||||
|
"lastPost": "Last Post",
|
||||||
|
"by": "by",
|
||||||
|
"recentThreads": "Recent Threads",
|
||||||
|
"thread": "Thread",
|
||||||
|
"replies": "Replies",
|
||||||
|
"views": "Views",
|
||||||
|
"forumStats": "Forum Statistics",
|
||||||
|
"totalThreads": "Total Threads",
|
||||||
|
"totalPosts": "Total Posts",
|
||||||
|
"onlineUsers": "Online Users",
|
||||||
|
"newMembers": "New Members"
|
||||||
|
},
|
||||||
"blog": {
|
"blog": {
|
||||||
"title": "Community Blog",
|
"title": "Community Blog",
|
||||||
"subtitle": "Stay updated with the latest news, tutorials, and insights from the Counter-Strike community",
|
"subtitle": "Stay updated with the latest news, tutorials, and insights from the Counter-Strike community",
|
||||||
|
|||||||
@@ -87,6 +87,25 @@
|
|||||||
"regions": "地区",
|
"regions": "地区",
|
||||||
"uptime": "正常运行时间"
|
"uptime": "正常运行时间"
|
||||||
},
|
},
|
||||||
|
"forum": {
|
||||||
|
"title": "社区论坛",
|
||||||
|
"subtitle": "与其他反恐精英玩家交流，分享策略，讨论最新更新",
|
||||||
|
"createThread": "创建新主题",
|
||||||
|
"categories": "论坛分类",
|
||||||
|
"threads": "主题",
|
||||||
|
"posts": "帖子",
|
||||||
|
"lastPost": "最后回复",
|
||||||
|
"by": "由",
|
||||||
|
"recentThreads": "最新主题",
|
||||||
|
"thread": "主题",
|
||||||
|
"replies": "回复",
|
||||||
|
"views": "查看",
|
||||||
|
"forumStats": "论坛统计",
|
||||||
|
"totalThreads": "总主题数",
|
||||||
|
"totalPosts": "总帖子数",
|
||||||
|
"onlineUsers": "在线用户",
|
||||||
|
"newMembers": "新成员"
|
||||||
|
},
|
||||||
"blog": {
|
"blog": {
|
||||||
"title": "社区博客",
|
"title": "社区博客",
|
||||||
"subtitle": "及时了解反恐精英社区的最新新闻、教程和见解",
|
"subtitle": "及时了解反恐精英社区的最新新闻、教程和见解",
|
||||||
|
|||||||
@@ -9,6 +9,7 @@ import App from './App.tsx'
|
|||||||
import Friends from './pages/Friends.tsx'
|
import Friends from './pages/Friends.tsx'
|
||||||
import Blog from './pages/Blog.tsx'
|
import Blog from './pages/Blog.tsx'
|
||||||
import Servers from './pages/Servers.tsx'
|
import Servers from './pages/Servers.tsx'
|
||||||
|
import Forum from './pages/Forum.tsx'
|
||||||
|
|
||||||
createRoot(document.getElementById('root')!).render(
|
createRoot(document.getElementById('root')!).render(
|
||||||
<StrictMode>
|
<StrictMode>
|
||||||
@@ -20,6 +21,7 @@ createRoot(document.getElementById('root')!).render(
|
|||||||
<Route path="/friends" element={<Friends />} />
|
<Route path="/friends" element={<Friends />} />
|
||||||
<Route path="/blog" element={<Blog />} />
|
<Route path="/blog" element={<Blog />} />
|
||||||
<Route path="/servers" element={<Servers />} />
|
<Route path="/servers" element={<Servers />} />
|
||||||
|
<Route path="/forum" element={<Forum />} />
|
||||||
</Routes>
|
</Routes>
|
||||||
</Router>
|
</Router>
|
||||||
</ThemeProvider>
|
</ThemeProvider>
|
||||||
|
|||||||
579
src/pages/Forum.tsx
Normal file
579
src/pages/Forum.tsx
Normal file
@@ -0,0 +1,579 @@
|
|||||||
|
import { useTranslation } from 'react-i18next'
|
||||||
|
import Layout from '../components/Layout'
|
||||||
|
import '../App.css'
|
||||||
|
|
||||||
|
interface ForumThread {
|
||||||
|
id: number
|
||||||
|
title: string
|
||||||
|
author: string
|
||||||
|
replies: number
|
||||||
|
views: number
|
||||||
|
lastPost: {
|
||||||
|
author: string
|
||||||
|
time: string
|
||||||
|
}
|
||||||
|
isSticky?: boolean
|
||||||
|
isLocked?: boolean
|
||||||
|
category: string
|
||||||
|
}
|
||||||
|
|
||||||
|
interface ForumCategory {
|
||||||
|
id: string
|
||||||
|
name: string
|
||||||
|
description: string
|
||||||
|
threads: number
|
||||||
|
posts: number
|
||||||
|
lastPost?: {
|
||||||
|
thread: string
|
||||||
|
author: string
|
||||||
|
time: string
|
||||||
|
}
|
||||||
|
icon: string
|
||||||
|
}
|
||||||
|
|
||||||
|
function Forum() {
|
||||||
|
const { t } = useTranslation()
|
||||||
|
|
||||||
|
// Mock forum categories
|
||||||
|
const categories: ForumCategory[] = [
|
||||||
|
{
|
||||||
|
id: 'general',
|
||||||
|
name: 'General Discussion',
|
||||||
|
description: 'General topics about Counter-Strike and gaming',
|
||||||
|
threads: 1247,
|
||||||
|
posts: 8923,
|
||||||
|
lastPost: {
|
||||||
|
thread: 'New update discussion',
|
||||||
|
author: 'ProGamer99',
|
||||||
|
time: '2 hours ago'
|
||||||
|
},
|
||||||
|
icon: '💬'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'strategy',
|
||||||
|
name: 'Strategy & Tactics',
|
||||||
|
description: 'Discuss strategies, tactics, and gameplay tips',
|
||||||
|
threads: 856,
|
||||||
|
posts: 5432,
|
||||||
|
lastPost: {
|
||||||
|
thread: 'Dust2 A site defense',
|
||||||
|
author: 'TacticalNuke',
|
||||||
|
time: '1 hour ago'
|
||||||
|
},
|
||||||
|
icon: '🎯'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'esports',
|
||||||
|
name: 'Esports & Tournaments',
|
||||||
|
description: 'Professional gaming, tournaments, and competitive play',
|
||||||
|
threads: 623,
|
||||||
|
posts: 4121,
|
||||||
|
lastPost: {
|
||||||
|
thread: 'Major championship predictions',
|
||||||
|
author: 'EsportsFan',
|
||||||
|
time: '30 minutes ago'
|
||||||
|
},
|
||||||
|
icon: '🏆'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'technical',
|
||||||
|
name: 'Technical Support',
|
||||||
|
description: 'Help with game issues, bugs, and technical problems',
|
||||||
|
threads: 445,
|
||||||
|
posts: 2897,
|
||||||
|
lastPost: {
|
||||||
|
thread: 'Game crashing on startup',
|
||||||
|
author: 'TechSupport',
|
||||||
|
time: '15 minutes ago'
|
||||||
|
},
|
||||||
|
icon: '🔧'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'offtopic',
|
||||||
|
name: 'Off-Topic',
|
||||||
|
description: 'Non-gaming discussions and casual chat',
|
||||||
|
threads: 334,
|
||||||
|
posts: 2156,
|
||||||
|
lastPost: {
|
||||||
|
thread: 'Favorite gaming snacks',
|
||||||
|
author: 'FoodieGamer',
|
||||||
|
time: '45 minutes ago'
|
||||||
|
},
|
||||||
|
icon: '🎮'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
// Mock recent threads
|
||||||
|
const recentThreads: ForumThread[] = [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
title: 'New CS2 update - Weapon balance changes',
|
||||||
|
author: 'GameMaster',
|
||||||
|
replies: 23,
|
||||||
|
views: 1247,
|
||||||
|
lastPost: {
|
||||||
|
author: 'ProPlayer',
|
||||||
|
time: '5 minutes ago'
|
||||||
|
},
|
||||||
|
category: 'general'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
title: 'How to improve your aim in 30 days',
|
||||||
|
author: 'AimTrainer',
|
||||||
|
replies: 45,
|
||||||
|
views: 2156,
|
||||||
|
lastPost: {
|
||||||
|
author: 'NewbieGamer',
|
||||||
|
time: '12 minutes ago'
|
||||||
|
},
|
||||||
|
category: 'strategy'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
title: 'Major tournament bracket predictions',
|
||||||
|
author: 'EsportsAnalyst',
|
||||||
|
replies: 67,
|
||||||
|
views: 3421,
|
||||||
|
lastPost: {
|
||||||
|
author: 'TournamentFan',
|
||||||
|
time: '18 minutes ago'
|
||||||
|
},
|
||||||
|
category: 'esports'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
title: 'Game freezing after latest patch',
|
||||||
|
author: 'FrustratedPlayer',
|
||||||
|
replies: 12,
|
||||||
|
views: 567,
|
||||||
|
lastPost: {
|
||||||
|
author: 'TechHelper',
|
||||||
|
time: '25 minutes ago'
|
||||||
|
},
|
||||||
|
category: 'technical'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 5,
|
||||||
|
title: 'Best gaming setup under $1000',
|
||||||
|
author: 'PCMaster',
|
||||||
|
replies: 89,
|
||||||
|
views: 4321,
|
||||||
|
lastPost: {
|
||||||
|
author: 'BudgetBuilder',
|
||||||
|
time: '32 minutes ago'
|
||||||
|
},
|
||||||
|
category: 'offtopic'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 6,
|
||||||
|
title: 'Team communication strategies',
|
||||||
|
author: 'TeamLeader',
|
||||||
|
replies: 34,
|
||||||
|
views: 1876,
|
||||||
|
lastPost: {
|
||||||
|
author: 'VoiceChatPro',
|
||||||
|
time: '41 minutes ago'
|
||||||
|
},
|
||||||
|
category: 'strategy',
|
||||||
|
isSticky: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 7,
|
||||||
|
title: 'Server rules and guidelines',
|
||||||
|
author: 'Admin',
|
||||||
|
replies: 8,
|
||||||
|
views: 2156,
|
||||||
|
lastPost: {
|
||||||
|
author: 'Moderator',
|
||||||
|
time: '1 hour ago'
|
||||||
|
},
|
||||||
|
category: 'general',
|
||||||
|
isSticky: true,
|
||||||
|
isLocked: true
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
const getCategoryIcon = (categoryId: string) => {
|
||||||
|
const category = categories.find(cat => cat.id === categoryId)
|
||||||
|
return category?.icon || '💬'
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Layout currentPage="forum">
|
||||||
|
{/* Forum Page Header */}
|
||||||
|
<section className="forum-header" style={{
|
||||||
|
padding: '120px 2rem 60px',
|
||||||
|
background: 'linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%)',
|
||||||
|
textAlign: 'center'
|
||||||
|
}}>
|
||||||
|
<div style={{ maxWidth: '800px', margin: '0 auto' }}>
|
||||||
|
<h1 style={{
|
||||||
|
fontSize: '3rem',
|
||||||
|
fontWeight: 'bold',
|
||||||
|
marginBottom: '1rem',
|
||||||
|
background: 'linear-gradient(45deg, var(--accent-primary), var(--accent-secondary))',
|
||||||
|
WebkitBackgroundClip: 'text',
|
||||||
|
WebkitTextFillColor: 'transparent',
|
||||||
|
backgroundClip: 'text'
|
||||||
|
}}>
|
||||||
|
{t('forum.title')}
|
||||||
|
</h1>
|
||||||
|
<p style={{
|
||||||
|
fontSize: '1.2rem',
|
||||||
|
color: 'var(--text-secondary)',
|
||||||
|
marginBottom: '2rem'
|
||||||
|
}}>
|
||||||
|
{t('forum.subtitle')}
|
||||||
|
</p>
|
||||||
|
<button style={{
|
||||||
|
padding: '0.75rem 1.5rem',
|
||||||
|
background: 'var(--accent-primary)',
|
||||||
|
color: 'white',
|
||||||
|
border: 'none',
|
||||||
|
borderRadius: '6px',
|
||||||
|
fontWeight: 'bold',
|
||||||
|
cursor: 'pointer',
|
||||||
|
fontSize: '1rem'
|
||||||
|
}}>
|
||||||
|
{t('forum.createThread')}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Forum Categories */}
|
||||||
|
<section className="forum-categories" style={{
|
||||||
|
padding: '2rem',
|
||||||
|
maxWidth: '1200px',
|
||||||
|
margin: '0 auto'
|
||||||
|
}}>
|
||||||
|
<h2 style={{
|
||||||
|
fontSize: '2rem',
|
||||||
|
fontWeight: 'bold',
|
||||||
|
marginBottom: '2rem',
|
||||||
|
color: 'var(--text-primary)',
|
||||||
|
textAlign: 'center'
|
||||||
|
}}>
|
||||||
|
{t('forum.categories')}
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<div style={{
|
||||||
|
display: 'grid',
|
||||||
|
gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))',
|
||||||
|
gap: '1.5rem'
|
||||||
|
}}>
|
||||||
|
{categories.map((category) => (
|
||||||
|
<div
|
||||||
|
key={category.id}
|
||||||
|
className="forum-category-card"
|
||||||
|
style={{
|
||||||
|
background: 'var(--bg-secondary)',
|
||||||
|
border: '1px solid var(--border-color)',
|
||||||
|
borderRadius: '12px',
|
||||||
|
padding: '1.5rem',
|
||||||
|
transition: 'all 0.3s ease',
|
||||||
|
cursor: 'pointer'
|
||||||
|
}}
|
||||||
|
onMouseEnter={(e) => {
|
||||||
|
e.currentTarget.style.transform = 'translateY(-5px)'
|
||||||
|
e.currentTarget.style.boxShadow = '0 10px 25px rgba(0,0,0,0.2)'
|
||||||
|
}}
|
||||||
|
onMouseLeave={(e) => {
|
||||||
|
e.currentTarget.style.transform = 'translateY(0)'
|
||||||
|
e.currentTarget.style.boxShadow = 'none'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{/* Category Header */}
|
||||||
|
<div style={{
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
gap: '1rem',
|
||||||
|
marginBottom: '1rem'
|
||||||
|
}}>
|
||||||
|
<div style={{
|
||||||
|
fontSize: '2rem'
|
||||||
|
}}>
|
||||||
|
{category.icon}
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 style={{
|
||||||
|
fontSize: '1.3rem',
|
||||||
|
fontWeight: 'bold',
|
||||||
|
color: 'var(--text-primary)',
|
||||||
|
marginBottom: '0.25rem'
|
||||||
|
}}>
|
||||||
|
{category.name}
|
||||||
|
</h3>
|
||||||
|
<p style={{
|
||||||
|
color: 'var(--text-secondary)',
|
||||||
|
fontSize: '0.9rem'
|
||||||
|
}}>
|
||||||
|
{category.description}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Category Stats */}
|
||||||
|
<div style={{
|
||||||
|
display: 'flex',
|
||||||
|
justifyContent: 'space-between',
|
||||||
|
alignItems: 'center',
|
||||||
|
marginBottom: '1rem'
|
||||||
|
}}>
|
||||||
|
<div style={{
|
||||||
|
display: 'flex',
|
||||||
|
gap: '1rem',
|
||||||
|
fontSize: '0.9rem',
|
||||||
|
color: 'var(--text-secondary)'
|
||||||
|
}}>
|
||||||
|
<span>{category.threads} {t('forum.threads')}</span>
|
||||||
|
<span>{category.posts} {t('forum.posts')}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Last Post */}
|
||||||
|
{category.lastPost && (
|
||||||
|
<div style={{
|
||||||
|
borderTop: '1px solid var(--border-color)',
|
||||||
|
paddingTop: '1rem'
|
||||||
|
}}>
|
||||||
|
<div style={{
|
||||||
|
fontSize: '0.8rem',
|
||||||
|
color: 'var(--text-secondary)',
|
||||||
|
marginBottom: '0.25rem'
|
||||||
|
}}>
|
||||||
|
{t('forum.lastPost')}:
|
||||||
|
</div>
|
||||||
|
<div style={{
|
||||||
|
fontSize: '0.9rem',
|
||||||
|
color: 'var(--text-primary)',
|
||||||
|
fontWeight: '500'
|
||||||
|
}}>
|
||||||
|
{category.lastPost.thread}
|
||||||
|
</div>
|
||||||
|
<div style={{
|
||||||
|
fontSize: '0.8rem',
|
||||||
|
color: 'var(--text-secondary)'
|
||||||
|
}}>
|
||||||
|
{t('forum.by')} {category.lastPost.author} • {category.lastPost.time}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Recent Threads */}
|
||||||
|
<section className="recent-threads" style={{
|
||||||
|
padding: '2rem',
|
||||||
|
maxWidth: '1200px',
|
||||||
|
margin: '0 auto'
|
||||||
|
}}>
|
||||||
|
<h2 style={{
|
||||||
|
fontSize: '2rem',
|
||||||
|
fontWeight: 'bold',
|
||||||
|
marginBottom: '2rem',
|
||||||
|
color: 'var(--text-primary)',
|
||||||
|
textAlign: 'center'
|
||||||
|
}}>
|
||||||
|
{t('forum.recentThreads')}
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<div style={{
|
||||||
|
background: 'var(--bg-secondary)',
|
||||||
|
border: '1px solid var(--border-color)',
|
||||||
|
borderRadius: '12px',
|
||||||
|
overflow: 'hidden'
|
||||||
|
}}>
|
||||||
|
{/* Table Header */}
|
||||||
|
<div style={{
|
||||||
|
display: 'grid',
|
||||||
|
gridTemplateColumns: '1fr 120px 80px 150px',
|
||||||
|
gap: '1rem',
|
||||||
|
padding: '1rem 1.5rem',
|
||||||
|
background: 'var(--bg-primary)',
|
||||||
|
borderBottom: '1px solid var(--border-color)',
|
||||||
|
fontSize: '0.9rem',
|
||||||
|
fontWeight: 'bold',
|
||||||
|
color: 'var(--text-secondary)'
|
||||||
|
}}>
|
||||||
|
<div>{t('forum.thread')}</div>
|
||||||
|
<div>{t('forum.replies')}</div>
|
||||||
|
<div>{t('forum.views')}</div>
|
||||||
|
<div>{t('forum.lastPost')}</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Thread Rows */}
|
||||||
|
{recentThreads.map((thread) => (
|
||||||
|
<div
|
||||||
|
key={thread.id}
|
||||||
|
style={{
|
||||||
|
display: 'grid',
|
||||||
|
gridTemplateColumns: '1fr 120px 80px 150px',
|
||||||
|
gap: '1rem',
|
||||||
|
padding: '1rem 1.5rem',
|
||||||
|
borderBottom: '1px solid var(--border-color)',
|
||||||
|
transition: 'background-color 0.2s ease',
|
||||||
|
cursor: 'pointer'
|
||||||
|
}}
|
||||||
|
onMouseEnter={(e) => {
|
||||||
|
e.currentTarget.style.backgroundColor = 'var(--bg-primary)'
|
||||||
|
}}
|
||||||
|
onMouseLeave={(e) => {
|
||||||
|
e.currentTarget.style.backgroundColor = 'transparent'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{/* Thread Info */}
|
||||||
|
<div>
|
||||||
|
<div style={{
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
gap: '0.5rem',
|
||||||
|
marginBottom: '0.25rem'
|
||||||
|
}}>
|
||||||
|
<span style={{ fontSize: '1rem' }}>
|
||||||
|
{getCategoryIcon(thread.category)}
|
||||||
|
</span>
|
||||||
|
<h4 style={{
|
||||||
|
fontSize: '1rem',
|
||||||
|
fontWeight: thread.isSticky ? 'bold' : 'normal',
|
||||||
|
color: 'var(--text-primary)',
|
||||||
|
margin: 0
|
||||||
|
}}>
|
||||||
|
{thread.isSticky && '📌 '}
|
||||||
|
{thread.isLocked && '🔒 '}
|
||||||
|
{thread.title}
|
||||||
|
</h4>
|
||||||
|
</div>
|
||||||
|
<div style={{
|
||||||
|
fontSize: '0.8rem',
|
||||||
|
color: 'var(--text-secondary)'
|
||||||
|
}}>
|
||||||
|
{t('forum.by')} {thread.author}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Replies */}
|
||||||
|
<div style={{
|
||||||
|
fontSize: '0.9rem',
|
||||||
|
color: 'var(--text-primary)',
|
||||||
|
textAlign: 'center'
|
||||||
|
}}>
|
||||||
|
{thread.replies}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Views */}
|
||||||
|
<div style={{
|
||||||
|
fontSize: '0.9rem',
|
||||||
|
color: 'var(--text-primary)',
|
||||||
|
textAlign: 'center'
|
||||||
|
}}>
|
||||||
|
{thread.views}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Last Post */}
|
||||||
|
<div style={{
|
||||||
|
fontSize: '0.8rem',
|
||||||
|
color: 'var(--text-secondary)'
|
||||||
|
}}>
|
||||||
|
<div>{thread.lastPost.author}</div>
|
||||||
|
<div>{thread.lastPost.time}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Forum Stats */}
|
||||||
|
<section className="forum-stats" style={{
|
||||||
|
padding: '4rem 2rem',
|
||||||
|
background: 'var(--bg-secondary)',
|
||||||
|
textAlign: 'center'
|
||||||
|
}}>
|
||||||
|
<div style={{ maxWidth: '800px', margin: '0 auto' }}>
|
||||||
|
<h2 style={{
|
||||||
|
fontSize: '2rem',
|
||||||
|
fontWeight: 'bold',
|
||||||
|
marginBottom: '2rem',
|
||||||
|
color: 'var(--text-primary)'
|
||||||
|
}}>
|
||||||
|
{t('forum.forumStats')}
|
||||||
|
</h2>
|
||||||
|
<div style={{
|
||||||
|
display: 'grid',
|
||||||
|
gridTemplateColumns: 'repeat(auto-fit, minmax(150px, 1fr))',
|
||||||
|
gap: '2rem'
|
||||||
|
}}>
|
||||||
|
<div>
|
||||||
|
<div style={{
|
||||||
|
fontSize: '2.5rem',
|
||||||
|
fontWeight: 'bold',
|
||||||
|
color: 'var(--accent-primary)',
|
||||||
|
marginBottom: '0.5rem'
|
||||||
|
}}>
|
||||||
|
{categories.reduce((sum, cat) => sum + cat.threads, 0)}
|
||||||
|
</div>
|
||||||
|
<div style={{
|
||||||
|
color: 'var(--text-secondary)',
|
||||||
|
fontSize: '1.1rem'
|
||||||
|
}}>
|
||||||
|
{t('forum.totalThreads')}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div style={{
|
||||||
|
fontSize: '2.5rem',
|
||||||
|
fontWeight: 'bold',
|
||||||
|
color: 'var(--accent-primary)',
|
||||||
|
marginBottom: '0.5rem'
|
||||||
|
}}>
|
||||||
|
{categories.reduce((sum, cat) => sum + cat.posts, 0)}
|
||||||
|
</div>
|
||||||
|
<div style={{
|
||||||
|
color: 'var(--text-secondary)',
|
||||||
|
fontSize: '1.1rem'
|
||||||
|
}}>
|
||||||
|
{t('forum.totalPosts')}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div style={{
|
||||||
|
fontSize: '2.5rem',
|
||||||
|
fontWeight: 'bold',
|
||||||
|
color: 'var(--accent-primary)',
|
||||||
|
marginBottom: '0.5rem'
|
||||||
|
}}>
|
||||||
|
1,247
|
||||||
|
</div>
|
||||||
|
<div style={{
|
||||||
|
color: 'var(--text-secondary)',
|
||||||
|
fontSize: '1.1rem'
|
||||||
|
}}>
|
||||||
|
{t('forum.onlineUsers')}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div style={{
|
||||||
|
fontSize: '2.5rem',
|
||||||
|
fontWeight: 'bold',
|
||||||
|
color: 'var(--accent-primary)',
|
||||||
|
marginBottom: '0.5rem'
|
||||||
|
}}>
|
||||||
|
892
|
||||||
|
</div>
|
||||||
|
<div style={{
|
||||||
|
color: 'var(--text-secondary)',
|
||||||
|
fontSize: '1.1rem'
|
||||||
|
}}>
|
||||||
|
{t('forum.newMembers')}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</Layout>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Forum
|
||||||
Reference in New Issue
Block a user