CiallooWeb/www.cialloo.com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add internationalization support with i18next and language selector component

Browse Source
This commit is contained in:
cialloo
2025-10-03 11:49:51 +08:00
parent a4a3cfafd2
commit 765ef6f9fc
9 changed files with 410 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

107
src/App.tsx
View File

@@ -1,6 +1,9 @@
import { useTranslation } from 'react-i18next'
import LanguageSelector from './components/LanguageSelector'
import './App.css'
function App() {
const { t } = useTranslation()
// Mock data - in real app, this would come from API
const stats = {
@@ -24,14 +27,15 @@ function App() {
<nav className="navbar">
<div className="nav-container">
<div className="nav-logo">
<h2>🎯 CS Community</h2>
<h2>🎯 {t('nav.logo')}</h2>
</div>
<div className="nav-links">
<a href="#servers">Servers</a>
<a href="#blog">Blog</a>
<a href="#git">Git</a>
<a href="#forum">Forum</a>
<button className="join-btn">Join Now</button>
<a href="#servers">{t('nav.servers')}</a>
<a href="#blog">{t('nav.blog')}</a>
<a href="#git">{t('nav.git')}</a>
<a href="#forum">{t('nav.forum')}</a>
<LanguageSelector />
<button className="join-btn">{t('nav.joinNow')}</button>
</div>
</div>
</nav>
@@ -40,16 +44,15 @@ function App() {
<section className="hero">
<div className="hero-content">
<h1 className="hero-title">
Welcome to the Ultimate<br />
<span className="highlight">Counter-Strike</span> Community
{t('hero.title')}<br />
<span className="highlight">{t('hero.titleHighlight')}</span> {t('hero.titleEnd')}
</h1>
<p className="hero-subtitle">
Join thousands of players in competitive matches, casual games, and community events.
Experience the best gaming community with dedicated servers and passionate players.
{t('hero.subtitle')}
</p>
<div className="hero-buttons">
<button className="btn-primary">🎮 Start Playing</button>
<button className="btn-secondary">📊 View Stats</button>
<button className="btn-primary">{t('hero.startPlaying')}</button>
<button className="btn-secondary">{t('hero.viewStats')}</button>
</div>
</div>
<div className="hero-visual">
@@ -71,22 +74,22 @@ function App() {
<div className="stat-card">
<div className="stat-icon">👥</div>
<div className="stat-number">{stats.onlinePlayers.toLocaleString()}</div>
<div className="stat-label">Online Players</div>
<div className="stat-label">{t('stats.onlinePlayers')}</div>
</div>
<div className="stat-card">
<div className="stat-icon">🖥️</div>
<div className="stat-number">{stats.totalServers}</div>
<div className="stat-label">Active Servers</div>
<div className="stat-label">{t('stats.activeServers')}</div>
</div>
<div className="stat-card">
<div className="stat-icon">⏱️</div>
<div className="stat-number">{stats.totalPlayTime}</div>
<div className="stat-label">Hours Played</div>
<div className="stat-label">{t('stats.hoursPlayed')}</div>
</div>
<div className="stat-card">
<div className="stat-icon">🎯</div>
<div className="stat-number">{stats.activeGames}</div>
<div className="stat-label">Live Matches</div>
<div className="stat-label">{t('stats.liveMatches')}</div>
</div>
</div>
</section>
@@ -94,31 +97,31 @@ function App() {
{/* Features Section */}
<section className="features-section">
<div className="features-container">
<h2 className="section-title">Community Features</h2>
<h2 className="section-title">{t('features.title')}</h2>
<div className="features-grid">
<div className="feature-card" id="servers">
<div className="feature-icon">🖥️</div>
<h3>Server Browser</h3>
<p>Find and join the best Counter-Strike servers. Browse by game mode, region, and player count.</p>
<button className="feature-btn">Browse Servers</button>
<h3>{t('features.serverBrowser.title')}</h3>
<p>{t('features.serverBrowser.description')}</p>
<button className="feature-btn">{t('features.browseServers')}</button>
</div>
<div className="feature-card" id="blog">
<div className="feature-icon">📝</div>
<h3>Community Blog</h3>
<p>Stay updated with the latest news, tournament results, and community announcements.</p>
<button className="feature-btn">Read Blog</button>
<h3>{t('features.blog.title')}</h3>
<p>{t('features.blog.description')}</p>
<button className="feature-btn">{t('features.readBlog')}</button>
</div>
<div className="feature-card" id="git">
<div className="feature-icon">📦</div>
<h3>Open Source</h3>
<p>Contribute to our open-source projects. Custom maps, configs, and community tools.</p>
<button className="feature-btn">View GitHub</button>
<h3>{t('features.git.title')}</h3>
<p>{t('features.git.description')}</p>
<button className="feature-btn">{t('features.viewGitHub')}</button>
</div>
<div className="feature-card" id="forum">
<div className="feature-icon">💬</div>
<h3>Discussion Forum</h3>
<p>Join discussions about strategies, share your experiences, and connect with fellow gamers.</p>
<button className="feature-btn">Join Forum</button>
<h3>{t('features.forum.title')}</h3>
<p>{t('features.forum.description')}</p>
<button className="feature-btn">{t('features.joinForum')}</button>
</div>
</div>
</div>
@@ -128,7 +131,7 @@ function App() {
<section className="activity-section">
<div className="activity-container">
<div className="activity-main">
<h2 className="section-title">Recent Activity</h2>
<h2 className="section-title">{t('activity.title')}</h2>
<div className="chat-feed">
{recentChats.map((chat, index) => (
<div key={index} className="chat-message">
@@ -141,7 +144,7 @@ function App() {
</div>
<div className="activity-sidebar">
<div className="sidebar-card">
<h3>🏆 Top Players</h3>
<h3>{t('activity.topPlayers')}</h3>
<div className="leaderboard">
<div className="leader-item">1. ProGamer99 - 2,450 pts</div>
<div className="leader-item">2. SniperElite - 2,180 pts</div>
@@ -149,11 +152,11 @@ function App() {
</div>
</div>
<div className="sidebar-card">
<h3>🎯 Quick Stats</h3>
<h3>{t('activity.quickStats')}</h3>
<div className="quick-stats">
<div>Avg Match Time: 12m 34s</div>
<div>Most Popular Map: Dust2</div>
<div>Peak Hours: 8-11 PM</div>
<div>{t('activity.avgMatchTime')}</div>
<div>{t('activity.mostPopularMap')}</div>
<div>{t('activity.peakHours')}</div>
</div>
</div>
</div>
@@ -164,32 +167,32 @@ function App() {
<footer className="footer">
<div className="footer-container">
<div className="footer-section">
<h4>🎯 CS Community</h4>
<p>The ultimate destination for Counter-Strike enthusiasts worldwide.</p>
<h4>{t('footer.community')}</h4>
<p>{t('footer.communityDesc')}</p>
</div>
<div className="footer-section">
<h4>Quick Links</h4>
<a href="#servers">Servers</a>
<a href="#blog">Blog</a>
<a href="#forum">Forum</a>
<a href="#git">GitHub</a>
<h4>{t('footer.quickLinks')}</h4>
<a href="#servers">{t('nav.servers')}</a>
<a href="#blog">{t('nav.blog')}</a>
<a href="#forum">{t('nav.forum')}</a>
<a href="#git">{t('nav.git')}</a>
</div>
<div className="footer-section">
<h4>Community</h4>
<a href="#">Discord</a>
<a href="#">Steam Group</a>
<a href="#">Tournaments</a>
<a href="#">Support</a>
<h4>{t('footer.communityLinks')}</h4>
<a href="#">{t('footer.discord')}</a>
<a href="#">{t('footer.steamGroup')}</a>
<a href="#">{t('footer.tournaments')}</a>
<a href="#">{t('footer.support')}</a>
</div>
<div className="footer-section">
<h4>Legal</h4>
<a href="#">Privacy Policy</a>
<a href="#">Terms of Service</a>
<a href="#">Contact</a>
<h4>{t('footer.legal')}</h4>
<a href="#">{t('footer.privacyPolicy')}</a>
<a href="#">{t('footer.termsOfService')}</a>
<a href="#">{t('footer.contact')}</a>
</div>
</div>
<div className="footer-bottom">
<p>&copy; 2025 CS Community. All rights reserved. | Made with ❤️ for gamers</p>
<p>{t('footer.copyright')}</p>
</div>
</footer>
</div>