feat: implement blog post and tag fetching with pagination
All checks were successful
CI - Build and Push / Build and Push Docker Image (push) Successful in 22s
All checks were successful
CI - Build and Push / Build and Push Docker Image (push) Successful in 22s
This commit is contained in:
@@ -87,6 +87,79 @@ export async function uploadImage(
|
||||
return { fileKey, url };
|
||||
}
|
||||
|
||||
/**
|
||||
* Get a list of blog posts with pagination
|
||||
*/
|
||||
export async function listBlogPosts(
|
||||
page: number,
|
||||
pageSize: number,
|
||||
tagIds: string[] = []
|
||||
): Promise<{
|
||||
posts: Array<{
|
||||
postId: string;
|
||||
title: string;
|
||||
coverImageUrl: string;
|
||||
createdAt: number;
|
||||
updatedAt: number;
|
||||
}>;
|
||||
totalCount: number;
|
||||
}> {
|
||||
const response = await apiRequest('/api/blog/view/posts', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({ page, pageSize, tagIds }),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`Failed to list posts: ${response.statusText}`);
|
||||
}
|
||||
|
||||
return response.json();
|
||||
}
|
||||
|
||||
/**
|
||||
* Get a single blog post by ID
|
||||
*/
|
||||
export async function getBlogPost(postId: string): Promise<{
|
||||
postId: string;
|
||||
title: string;
|
||||
content: string;
|
||||
coverImageUrl: string;
|
||||
createdAt: number;
|
||||
updatedAt: number;
|
||||
}> {
|
||||
const response = await apiRequest('/api/blog/view/post', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({ postId }),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`Failed to get post: ${response.statusText}`);
|
||||
}
|
||||
|
||||
return response.json();
|
||||
}
|
||||
|
||||
/**
|
||||
* Get a list of blog tags
|
||||
*/
|
||||
export async function listBlogTags(): Promise<{
|
||||
tags: Array<{
|
||||
tagId: string;
|
||||
tagName: string;
|
||||
postCount: number;
|
||||
}>;
|
||||
}> {
|
||||
const response = await apiRequest('/api/blog/view/tags', {
|
||||
method: 'POST',
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`Failed to list tags: ${response.statusText}`);
|
||||
}
|
||||
|
||||
return response.json();
|
||||
}
|
||||
|
||||
/**
|
||||
* Create a new blog post
|
||||
*/
|
||||
|
||||
@@ -1,107 +1,115 @@
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { Link } from 'react-router-dom'
|
||||
import Layout from '../components/Layout'
|
||||
import '../App.css'
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { useState, useEffect } from 'react';
|
||||
import Layout from '../components/Layout';
|
||||
import { listBlogPosts, listBlogTags } from '../blog/api';
|
||||
import { getS3Url } from '../blog/s3Config';
|
||||
import { Toast } from '../components/Toast';
|
||||
import { useToast } from '../hooks/useToast';
|
||||
import '../App.css';
|
||||
|
||||
interface BlogPost {
|
||||
id: number
|
||||
title: string
|
||||
excerpt: string
|
||||
content: string
|
||||
author: string
|
||||
date: string
|
||||
readTime: string
|
||||
category: string
|
||||
tags: string[]
|
||||
image?: string
|
||||
postId: string;
|
||||
title: string;
|
||||
coverImageUrl: string;
|
||||
createdAt: number;
|
||||
updatedAt: number;
|
||||
}
|
||||
|
||||
interface BlogTag {
|
||||
tagId: string;
|
||||
tagName: string;
|
||||
postCount: number;
|
||||
}
|
||||
|
||||
function Blog() {
|
||||
const { t } = useTranslation()
|
||||
const { t } = useTranslation();
|
||||
const { toasts, removeToast, error } = useToast();
|
||||
|
||||
// Mock blog posts data
|
||||
const blogPosts: BlogPost[] = [
|
||||
{
|
||||
id: 1,
|
||||
title: "Mastering Counter-Strike: Advanced Tactics and Strategies",
|
||||
excerpt: "Learn the advanced tactics that separate professional players from casual gamers. From positioning to communication, discover the secrets of competitive CS.",
|
||||
content: "Full article content here...",
|
||||
author: "ProGamer99",
|
||||
date: "2025-10-01",
|
||||
readTime: "8 min read",
|
||||
category: "Strategy",
|
||||
tags: ["Counter-Strike", "Tactics", "Professional"],
|
||||
image: "🎯"
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "The Evolution of Esports: From LAN Parties to Global Tournaments",
|
||||
excerpt: "Explore how esports has grown from small local tournaments to billion-dollar industry with global audiences and professional athletes.",
|
||||
content: "Full article content here...",
|
||||
author: "EsportsAnalyst",
|
||||
date: "2025-09-28",
|
||||
readTime: "6 min read",
|
||||
category: "Esports",
|
||||
tags: ["Esports", "History", "Tournaments"],
|
||||
image: "🏆"
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "Building the Perfect Gaming Setup: Hardware Guide 2025",
|
||||
excerpt: "A comprehensive guide to building the ultimate gaming setup for Counter-Strike and other competitive games. From monitors to peripherals.",
|
||||
content: "Full article content here...",
|
||||
author: "TechReviewer",
|
||||
date: "2025-09-25",
|
||||
readTime: "12 min read",
|
||||
category: "Hardware",
|
||||
tags: ["Gaming Setup", "Hardware", "PC Building"],
|
||||
image: "🖥️"
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: "Community Spotlight: Rising Stars in CS Competitive Scene",
|
||||
excerpt: "Meet the up-and-coming players who are making waves in the Counter-Strike competitive scene. Their stories, strategies, and paths to success.",
|
||||
content: "Full article content here...",
|
||||
author: "CommunityManager",
|
||||
date: "2025-09-22",
|
||||
readTime: "10 min read",
|
||||
category: "Community",
|
||||
tags: ["Players", "Community", "Rising Stars"],
|
||||
image: "⭐"
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
title: "Mental Health in Competitive Gaming: Staying Sharp",
|
||||
excerpt: "The importance of mental health in competitive gaming. Tips and strategies for maintaining focus, managing stress, and performing at your best.",
|
||||
content: "Full article content here...",
|
||||
author: "SportsPsychologist",
|
||||
date: "2025-09-20",
|
||||
readTime: "7 min read",
|
||||
category: "Wellness",
|
||||
tags: ["Mental Health", "Gaming", "Performance"],
|
||||
image: "🧠"
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
title: "Server Administration: Running Your Own CS Game Server",
|
||||
excerpt: "A complete guide to setting up and managing your own Counter-Strike game server. From basic setup to advanced configuration and maintenance.",
|
||||
content: "Full article content here...",
|
||||
author: "ServerAdmin",
|
||||
date: "2025-09-18",
|
||||
readTime: "15 min read",
|
||||
category: "Technical",
|
||||
tags: ["Server", "Administration", "Technical"],
|
||||
image: "🖧"
|
||||
const [posts, setPosts] = useState<BlogPost[]>([]);
|
||||
const [tags, setTags] = useState<BlogTag[]>([]);
|
||||
const [totalCount, setTotalCount] = useState(0);
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const [selectedTags, setSelectedTags] = useState<string[]>([]);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [isLoadingMore, setIsLoadingMore] = useState(false);
|
||||
|
||||
const pageSize = 6;
|
||||
|
||||
// Fetch tags on mount
|
||||
useEffect(() => {
|
||||
const fetchTags = async () => {
|
||||
try {
|
||||
const response = await listBlogTags();
|
||||
setTags(response.tags);
|
||||
} catch (err) {
|
||||
error('Failed to load tags');
|
||||
console.error('Failed to fetch tags:', err);
|
||||
}
|
||||
};
|
||||
fetchTags();
|
||||
}, [error]);
|
||||
|
||||
// Fetch posts when page or tags change
|
||||
useEffect(() => {
|
||||
const fetchPosts = async () => {
|
||||
try {
|
||||
setIsLoading(true);
|
||||
const response = await listBlogPosts(currentPage, pageSize, selectedTags);
|
||||
setPosts(response.posts);
|
||||
setTotalCount(response.totalCount);
|
||||
} catch (err) {
|
||||
error('Failed to load blog posts');
|
||||
console.error('Failed to fetch posts:', err);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
fetchPosts();
|
||||
}, [currentPage, selectedTags, error]);
|
||||
|
||||
const handleLoadMore = async () => {
|
||||
try {
|
||||
setIsLoadingMore(true);
|
||||
const nextPage = currentPage + 1;
|
||||
const response = await listBlogPosts(nextPage, pageSize, selectedTags);
|
||||
setPosts([...posts, ...response.posts]);
|
||||
setCurrentPage(nextPage);
|
||||
} catch (err) {
|
||||
error('Failed to load more posts');
|
||||
console.error('Failed to load more posts:', err);
|
||||
} finally {
|
||||
setIsLoadingMore(false);
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
const categories = [...new Set(blogPosts.map(post => post.category))]
|
||||
const featuredPost = blogPosts[0]
|
||||
const recentPosts = blogPosts.slice(1, 4)
|
||||
const handleTagClick = (tagId: string) => {
|
||||
setSelectedTags((prev) => {
|
||||
if (prev.includes(tagId)) {
|
||||
return prev.filter((id) => id !== tagId);
|
||||
}
|
||||
return [...prev, tagId];
|
||||
});
|
||||
setCurrentPage(1); // Reset to first page when filtering
|
||||
};
|
||||
|
||||
const formatDate = (timestamp: number) => {
|
||||
return new Date(timestamp * 1000).toLocaleDateString('en-US', {
|
||||
year: 'numeric',
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
});
|
||||
};
|
||||
|
||||
const hasMorePosts = posts.length < totalCount;
|
||||
const featuredPost = posts[0];
|
||||
const recentPosts = posts.slice(1);
|
||||
|
||||
return (
|
||||
<Layout currentPage="blog">
|
||||
{/* Blog Page Header */}
|
||||
<Toast toasts={toasts} onRemove={removeToast} />
|
||||
|
||||
{/* Header Section */}
|
||||
<section className="blog-header" style={{
|
||||
padding: '120px 2rem 60px',
|
||||
background: 'linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%)',
|
||||
@@ -124,377 +132,332 @@ function Blog() {
|
||||
}}>
|
||||
{t('blog.subtitle')}
|
||||
</p>
|
||||
{/* Create Post Button */}
|
||||
<Link
|
||||
to="/blog/create"
|
||||
style={{
|
||||
display: 'inline-block',
|
||||
background: 'var(--accent-color)',
|
||||
color: 'white',
|
||||
padding: '1rem 2rem',
|
||||
borderRadius: '8px',
|
||||
textDecoration: 'none',
|
||||
fontWeight: 'bold',
|
||||
fontSize: '1.1rem',
|
||||
transition: 'transform 0.3s ease, box-shadow 0.3s ease'
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
e.currentTarget.style.transform = 'translateY(-2px)';
|
||||
e.currentTarget.style.boxShadow = '0 4px 12px var(--accent-shadow)';
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.transform = 'translateY(0)';
|
||||
e.currentTarget.style.boxShadow = 'none';
|
||||
}}
|
||||
>
|
||||
<Link to="/blog/create" style={{
|
||||
display: 'inline-block',
|
||||
background: 'var(--accent-color)',
|
||||
color: 'white',
|
||||
padding: '1rem 2rem',
|
||||
borderRadius: '8px',
|
||||
textDecoration: 'none',
|
||||
fontWeight: 'bold',
|
||||
fontSize: '1.1rem',
|
||||
transition: 'transform 0.3s ease'
|
||||
}}>
|
||||
✍️ Create New Post
|
||||
</Link>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Featured Post */}
|
||||
<section className="featured-post" style={{ padding: '0 2rem 60px' }}>
|
||||
<div style={{ maxWidth: '1200px', margin: '0 auto' }}>
|
||||
{/* Loading State */}
|
||||
{isLoading && (
|
||||
<section style={{ padding: '60px 2rem', textAlign: 'center' }}>
|
||||
<div style={{
|
||||
fontSize: '3rem',
|
||||
color: 'var(--text-secondary)',
|
||||
marginBottom: '1rem'
|
||||
}}>
|
||||
⏳
|
||||
</div>
|
||||
<p style={{
|
||||
color: 'var(--text-secondary)',
|
||||
fontSize: '1.2rem'
|
||||
}}>
|
||||
Loading posts...
|
||||
</p>
|
||||
</section>
|
||||
)}
|
||||
|
||||
{/* Empty State */}
|
||||
{!isLoading && posts.length === 0 && (
|
||||
<section style={{ padding: '60px 2rem', textAlign: 'center' }}>
|
||||
<div style={{ fontSize: '5rem', marginBottom: '1rem' }}>📝</div>
|
||||
<h2 style={{
|
||||
fontSize: '2rem',
|
||||
color: 'var(--text-primary)',
|
||||
marginBottom: '2rem',
|
||||
textAlign: 'center'
|
||||
marginBottom: '1rem'
|
||||
}}>
|
||||
{t('blog.featuredPost')}
|
||||
No Posts Yet
|
||||
</h2>
|
||||
<div style={{
|
||||
background: 'var(--bg-card)',
|
||||
border: '1px solid var(--border-color)',
|
||||
borderRadius: '12px',
|
||||
overflow: 'hidden',
|
||||
boxShadow: '0 4px 20px var(--shadow)',
|
||||
display: 'grid',
|
||||
gridTemplateColumns: '1fr 1fr',
|
||||
gap: '2rem',
|
||||
alignItems: 'center'
|
||||
<p style={{
|
||||
color: 'var(--text-secondary)',
|
||||
fontSize: '1.2rem',
|
||||
marginBottom: '2rem'
|
||||
}}>
|
||||
<div style={{ padding: '3rem' }}>
|
||||
<div style={{
|
||||
display: 'inline-block',
|
||||
background: 'var(--accent-color)',
|
||||
color: 'white',
|
||||
padding: '0.5rem 1rem',
|
||||
borderRadius: '20px',
|
||||
fontSize: '0.9rem',
|
||||
fontWeight: 'bold',
|
||||
marginBottom: '1rem'
|
||||
}}>
|
||||
{featuredPost.category}
|
||||
</div>
|
||||
<h3 style={{
|
||||
fontSize: '2rem',
|
||||
color: 'var(--text-primary)',
|
||||
marginBottom: '1rem',
|
||||
lineHeight: '1.3'
|
||||
}}>
|
||||
{featuredPost.title}
|
||||
</h3>
|
||||
<p style={{
|
||||
color: 'var(--text-secondary)',
|
||||
fontSize: '1.1rem',
|
||||
lineHeight: '1.6',
|
||||
marginBottom: '1.5rem'
|
||||
}}>
|
||||
{featuredPost.excerpt}
|
||||
</p>
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '1rem',
|
||||
marginBottom: '1.5rem'
|
||||
}}>
|
||||
<span style={{ color: 'var(--text-secondary)', fontSize: '0.9rem' }}>
|
||||
{t('blog.by')} {featuredPost.author}
|
||||
</span>
|
||||
<span style={{ color: 'var(--text-secondary)', fontSize: '0.9rem' }}>
|
||||
{featuredPost.date}
|
||||
</span>
|
||||
<span style={{ color: 'var(--text-secondary)', fontSize: '0.9rem' }}>
|
||||
{featuredPost.readTime}
|
||||
</span>
|
||||
</div>
|
||||
<Link
|
||||
to={`/blog/${featuredPost.id}`}
|
||||
style={{
|
||||
display: 'inline-block',
|
||||
background: 'var(--accent-color)',
|
||||
color: 'white',
|
||||
padding: '1rem 2rem',
|
||||
borderRadius: '8px',
|
||||
textDecoration: 'none',
|
||||
fontWeight: 'bold',
|
||||
fontSize: '1rem',
|
||||
transition: 'transform 0.3s ease'
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
e.currentTarget.style.transform = 'translateY(-2px)'
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.transform = 'translateY(0)'
|
||||
}}
|
||||
>
|
||||
{t('blog.readMore')}
|
||||
</Link>
|
||||
</div>
|
||||
<div style={{
|
||||
background: 'var(--bg-secondary)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
fontSize: '8rem',
|
||||
height: '300px'
|
||||
}}>
|
||||
{featuredPost.image}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
Be the first to create a blog post!
|
||||
</p>
|
||||
<Link to="/blog/create" style={{
|
||||
display: 'inline-block',
|
||||
background: 'var(--accent-color)',
|
||||
color: 'white',
|
||||
padding: '1rem 2rem',
|
||||
borderRadius: '8px',
|
||||
textDecoration: 'none',
|
||||
fontWeight: 'bold',
|
||||
fontSize: '1.1rem'
|
||||
}}>
|
||||
✍️ Create First Post
|
||||
</Link>
|
||||
</section>
|
||||
)}
|
||||
|
||||
{/* Blog Content */}
|
||||
<section className="blog-content" style={{ padding: '0 2rem 80px' }}>
|
||||
<div style={{ maxWidth: '1200px', margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 300px', gap: '3rem' }}>
|
||||
|
||||
{/* Main Content */}
|
||||
<div>
|
||||
{/* Featured Post */}
|
||||
{!isLoading && featuredPost && (
|
||||
<section style={{ padding: '0 2rem 60px' }}>
|
||||
<div style={{ maxWidth: '1200px', margin: '0 auto' }}>
|
||||
<h2 style={{
|
||||
fontSize: '2rem',
|
||||
color: 'var(--text-primary)',
|
||||
marginBottom: '2rem'
|
||||
marginBottom: '2rem',
|
||||
textAlign: 'center'
|
||||
}}>
|
||||
{t('blog.recentPosts')}
|
||||
{t('blog.featuredPost')}
|
||||
</h2>
|
||||
<Link to={`/blog/${featuredPost.postId}`} style={{ textDecoration: 'none', display: 'block' }}>
|
||||
<div style={{
|
||||
background: 'var(--bg-card)',
|
||||
border: '1px solid var(--border-color)',
|
||||
borderRadius: '12px',
|
||||
overflow: 'hidden',
|
||||
boxShadow: '0 4px 20px var(--shadow)',
|
||||
display: 'grid',
|
||||
gridTemplateColumns: '1fr 1fr',
|
||||
gap: '2rem',
|
||||
alignItems: 'center'
|
||||
}}>
|
||||
<div style={{ padding: '3rem' }}>
|
||||
<h3 style={{
|
||||
fontSize: '2rem',
|
||||
color: 'var(--text-primary)',
|
||||
marginBottom: '1rem',
|
||||
lineHeight: '1.3'
|
||||
}}>
|
||||
{featuredPost.title}
|
||||
</h3>
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '1rem',
|
||||
marginTop: '1.5rem'
|
||||
}}>
|
||||
<span style={{ color: 'var(--text-secondary)', fontSize: '0.9rem' }}>
|
||||
📅 {formatDate(featuredPost.createdAt)}
|
||||
</span>
|
||||
<span style={{ color: 'var(--text-secondary)', fontSize: '0.9rem' }}>
|
||||
🔄 {formatDate(featuredPost.updatedAt)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{
|
||||
background: `url(${getS3Url(featuredPost.coverImageUrl)}) center/cover`,
|
||||
height: '300px',
|
||||
borderRadius: '0 12px 12px 0'
|
||||
}} />
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
|
||||
<div style={{ display: 'grid', gap: '2rem' }}>
|
||||
{recentPosts.map(post => (
|
||||
<article key={post.id} style={{
|
||||
{/* Recent Posts & Sidebar */}
|
||||
{!isLoading && posts.length > 0 && (
|
||||
<section style={{ padding: '0 2rem 80px' }}>
|
||||
<div style={{
|
||||
maxWidth: '1200px',
|
||||
margin: '0 auto',
|
||||
display: 'grid',
|
||||
gridTemplateColumns: '1fr 300px',
|
||||
gap: '3rem'
|
||||
}}>
|
||||
{/* Posts Grid */}
|
||||
<div>
|
||||
<h2 style={{
|
||||
fontSize: '2rem',
|
||||
color: 'var(--text-primary)',
|
||||
marginBottom: '2rem'
|
||||
}}>
|
||||
{t('blog.recentPosts')}
|
||||
</h2>
|
||||
<div style={{ display: 'grid', gap: '2rem' }}>
|
||||
{recentPosts.map(post => (
|
||||
<Link key={post.postId} to={`/blog/${post.postId}`} style={{ textDecoration: 'none' }}>
|
||||
<article style={{
|
||||
background: 'var(--bg-card)',
|
||||
border: '1px solid var(--border-color)',
|
||||
borderRadius: '12px',
|
||||
overflow: 'hidden'
|
||||
}}>
|
||||
<div style={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: '200px 1fr',
|
||||
gap: '0'
|
||||
}}>
|
||||
<div style={{
|
||||
background: `url(${getS3Url(post.coverImageUrl)}) center/cover`,
|
||||
height: '200px'
|
||||
}} />
|
||||
<div style={{ padding: '2rem' }}>
|
||||
<h3 style={{
|
||||
fontSize: '1.5rem',
|
||||
color: 'var(--text-primary)',
|
||||
marginBottom: '1rem',
|
||||
lineHeight: '1.3'
|
||||
}}>
|
||||
{post.title}
|
||||
</h3>
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '1rem'
|
||||
}}>
|
||||
<span style={{ color: 'var(--text-secondary)', fontSize: '0.9rem' }}>
|
||||
📅 {formatDate(post.createdAt)}
|
||||
</span>
|
||||
<span style={{ color: 'var(--text-secondary)', fontSize: '0.9rem' }}>
|
||||
🔄 {formatDate(post.updatedAt)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Load More Button */}
|
||||
{hasMorePosts && (
|
||||
<div style={{ textAlign: 'center', marginTop: '3rem' }}>
|
||||
<button
|
||||
onClick={handleLoadMore}
|
||||
disabled={isLoadingMore}
|
||||
style={{
|
||||
background: isLoadingMore ? 'var(--bg-secondary)' : 'var(--accent-color)',
|
||||
color: 'white',
|
||||
border: 'none',
|
||||
padding: '1rem 2rem',
|
||||
borderRadius: '8px',
|
||||
fontSize: '1rem',
|
||||
fontWeight: 'bold',
|
||||
cursor: isLoadingMore ? 'not-allowed' : 'pointer',
|
||||
opacity: isLoadingMore ? 0.6 : 1
|
||||
}}
|
||||
>
|
||||
{isLoadingMore ? 'Loading...' : t('blog.loadMore')}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Sidebar */}
|
||||
<aside>
|
||||
{/* Tags */}
|
||||
{tags.length > 0 && (
|
||||
<div style={{
|
||||
background: 'var(--bg-card)',
|
||||
border: '1px solid var(--border-color)',
|
||||
borderRadius: '12px',
|
||||
overflow: 'hidden',
|
||||
transition: 'transform 0.3s ease, box-shadow 0.3s ease',
|
||||
cursor: 'pointer'
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
e.currentTarget.style.transform = 'translateY(-5px)'
|
||||
e.currentTarget.style.boxShadow = '0 10px 30px var(--accent-shadow)'
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.transform = 'translateY(0)'
|
||||
e.currentTarget.style.boxShadow = 'none'
|
||||
}}
|
||||
>
|
||||
<div style={{ display: 'grid', gridTemplateColumns: '200px 1fr', gap: '0' }}>
|
||||
<div style={{
|
||||
background: 'var(--bg-secondary)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
fontSize: '4rem'
|
||||
}}>
|
||||
{post.image}
|
||||
</div>
|
||||
<div style={{ padding: '2rem' }}>
|
||||
<div style={{
|
||||
display: 'inline-block',
|
||||
background: 'var(--accent-color)',
|
||||
color: 'white',
|
||||
padding: '0.3rem 0.8rem',
|
||||
borderRadius: '15px',
|
||||
fontSize: '0.8rem',
|
||||
fontWeight: 'bold',
|
||||
marginBottom: '1rem'
|
||||
}}>
|
||||
{post.category}
|
||||
</div>
|
||||
<h3 style={{
|
||||
fontSize: '1.5rem',
|
||||
color: 'var(--text-primary)',
|
||||
marginBottom: '1rem',
|
||||
lineHeight: '1.3'
|
||||
}}>
|
||||
{post.title}
|
||||
</h3>
|
||||
<p style={{
|
||||
color: 'var(--text-secondary)',
|
||||
fontSize: '1rem',
|
||||
lineHeight: '1.6',
|
||||
marginBottom: '1rem'
|
||||
}}>
|
||||
{post.excerpt}
|
||||
</p>
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '1rem',
|
||||
marginBottom: '1rem'
|
||||
}}>
|
||||
<span style={{ color: 'var(--text-secondary)', fontSize: '0.9rem' }}>
|
||||
{t('blog.by')} {post.author}
|
||||
</span>
|
||||
<span style={{ color: 'var(--text-secondary)', fontSize: '0.9rem' }}>
|
||||
{post.date}
|
||||
</span>
|
||||
<span style={{ color: 'var(--text-secondary)', fontSize: '0.9rem' }}>
|
||||
{post.readTime}
|
||||
</span>
|
||||
</div>
|
||||
<div style={{ display: 'flex', gap: '0.5rem', flexWrap: 'wrap' }}>
|
||||
{post.tags.map(tag => (
|
||||
<span key={tag} style={{
|
||||
background: 'var(--bg-secondary)',
|
||||
color: 'var(--text-secondary)',
|
||||
padding: '0.2rem 0.6rem',
|
||||
borderRadius: '12px',
|
||||
fontSize: '0.8rem'
|
||||
}}>
|
||||
#{tag}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Load More Button */}
|
||||
<div style={{ textAlign: 'center', marginTop: '3rem' }}>
|
||||
<button style={{
|
||||
background: 'var(--accent-color)',
|
||||
color: 'white',
|
||||
border: 'none',
|
||||
padding: '1rem 2rem',
|
||||
borderRadius: '8px',
|
||||
fontSize: '1rem',
|
||||
fontWeight: 'bold',
|
||||
cursor: 'pointer',
|
||||
transition: 'transform 0.3s ease'
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
e.currentTarget.style.transform = 'translateY(-2px)'
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.transform = 'translateY(0)'
|
||||
}}
|
||||
>
|
||||
{t('blog.loadMore')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Sidebar */}
|
||||
<aside>
|
||||
{/* Categories */}
|
||||
<div style={{
|
||||
background: 'var(--bg-card)',
|
||||
border: '1px solid var(--border-color)',
|
||||
borderRadius: '12px',
|
||||
padding: '2rem',
|
||||
marginBottom: '2rem'
|
||||
}}>
|
||||
<h3 style={{
|
||||
color: 'var(--text-primary)',
|
||||
marginBottom: '1rem',
|
||||
fontSize: '1.3rem'
|
||||
}}>
|
||||
{t('blog.categories')}
|
||||
</h3>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
|
||||
{categories.map(category => (
|
||||
<button key={category} style={{
|
||||
background: 'var(--bg-secondary)',
|
||||
padding: '2rem',
|
||||
marginBottom: '2rem'
|
||||
}}>
|
||||
<h3 style={{
|
||||
color: 'var(--text-primary)',
|
||||
border: 'none',
|
||||
padding: '0.75rem 1rem',
|
||||
borderRadius: '8px',
|
||||
cursor: 'pointer',
|
||||
textAlign: 'left',
|
||||
transition: 'background 0.3s ease'
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
e.currentTarget.style.background = 'var(--accent-color)'
|
||||
e.currentTarget.style.color = 'white'
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.background = 'var(--bg-secondary)'
|
||||
e.currentTarget.style.color = 'var(--text-primary)'
|
||||
}}
|
||||
>
|
||||
{category}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
marginBottom: '1rem',
|
||||
fontSize: '1.3rem'
|
||||
}}>
|
||||
{t('blog.categories')}
|
||||
</h3>
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: '0.5rem'
|
||||
}}>
|
||||
{tags.map(tag => (
|
||||
<button
|
||||
key={tag.tagId}
|
||||
onClick={() => handleTagClick(tag.tagId)}
|
||||
style={{
|
||||
background: selectedTags.includes(tag.tagId) ? 'var(--accent-color)' : 'var(--bg-secondary)',
|
||||
color: selectedTags.includes(tag.tagId) ? 'white' : 'var(--text-primary)',
|
||||
border: 'none',
|
||||
padding: '0.75rem 1rem',
|
||||
borderRadius: '8px',
|
||||
cursor: 'pointer',
|
||||
textAlign: 'left',
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center'
|
||||
}}
|
||||
>
|
||||
<span>{tag.tagName}</span>
|
||||
<span style={{
|
||||
background: 'rgba(255, 255, 255, 0.2)',
|
||||
padding: '0.2rem 0.6rem',
|
||||
borderRadius: '12px',
|
||||
fontSize: '0.8rem'
|
||||
}}>
|
||||
{tag.postCount}
|
||||
</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Newsletter Signup */}
|
||||
<div style={{
|
||||
background: 'var(--bg-card)',
|
||||
border: '1px solid var(--border-color)',
|
||||
borderRadius: '12px',
|
||||
padding: '2rem',
|
||||
textAlign: 'center'
|
||||
}}>
|
||||
<h3 style={{
|
||||
color: 'var(--text-primary)',
|
||||
marginBottom: '1rem',
|
||||
fontSize: '1.3rem'
|
||||
{/* Newsletter */}
|
||||
<div style={{
|
||||
background: 'var(--bg-card)',
|
||||
border: '1px solid var(--border-color)',
|
||||
borderRadius: '12px',
|
||||
padding: '2rem',
|
||||
textAlign: 'center'
|
||||
}}>
|
||||
{t('blog.subscribe')}
|
||||
</h3>
|
||||
<p style={{
|
||||
color: 'var(--text-secondary)',
|
||||
marginBottom: '1.5rem',
|
||||
fontSize: '0.9rem'
|
||||
}}>
|
||||
{t('blog.subscribeDesc')}
|
||||
</p>
|
||||
<input
|
||||
type="email"
|
||||
placeholder={t('blog.emailPlaceholder')}
|
||||
style={{
|
||||
width: '100%',
|
||||
padding: '0.75rem',
|
||||
border: '1px solid var(--border-color)',
|
||||
borderRadius: '6px',
|
||||
background: 'var(--bg-secondary)',
|
||||
<h3 style={{
|
||||
color: 'var(--text-primary)',
|
||||
marginBottom: '1rem',
|
||||
fontSize: '1.3rem'
|
||||
}}>
|
||||
{t('blog.subscribe')}
|
||||
</h3>
|
||||
<p style={{
|
||||
color: 'var(--text-secondary)',
|
||||
marginBottom: '1.5rem',
|
||||
fontSize: '0.9rem'
|
||||
}}
|
||||
/>
|
||||
<button style={{
|
||||
width: '100%',
|
||||
background: 'var(--accent-color)',
|
||||
color: 'white',
|
||||
border: 'none',
|
||||
padding: '0.75rem',
|
||||
borderRadius: '6px',
|
||||
fontSize: '0.9rem',
|
||||
fontWeight: 'bold',
|
||||
cursor: 'pointer',
|
||||
transition: 'transform 0.3s ease'
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
e.currentTarget.style.transform = 'translateY(-2px)'
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.transform = 'translateY(0)'
|
||||
}}
|
||||
>
|
||||
{t('blog.subscribeBtn')}
|
||||
</button>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
</section>
|
||||
}}>
|
||||
{t('blog.subscribeDesc')}
|
||||
</p>
|
||||
<input
|
||||
type="email"
|
||||
placeholder={t('blog.emailPlaceholder')}
|
||||
style={{
|
||||
width: '100%',
|
||||
padding: '0.75rem',
|
||||
border: '1px solid var(--border-color)',
|
||||
borderRadius: '6px',
|
||||
background: 'var(--bg-secondary)',
|
||||
color: 'var(--text-primary)',
|
||||
marginBottom: '1rem',
|
||||
fontSize: '0.9rem'
|
||||
}}
|
||||
/>
|
||||
<button style={{
|
||||
width: '100%',
|
||||
background: 'var(--accent-color)',
|
||||
color: 'white',
|
||||
border: 'none',
|
||||
padding: '0.75rem',
|
||||
borderRadius: '6px',
|
||||
fontSize: '0.9rem',
|
||||
fontWeight: 'bold',
|
||||
cursor: 'pointer'
|
||||
}}>
|
||||
{t('blog.subscribeBtn')}
|
||||
</button>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
</Layout>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
export default Blog
|
||||
export default Blog;
|
||||
|
||||
Reference in New Issue
Block a user