280 lines
10 KiB
TypeScript
280 lines
10 KiB
TypeScript
import React, { useEffect, useState } from "react";
|
||
import { Link } from "react-router-dom";
|
||
import { Calendar, Clock, User, Tag, Search } from "lucide-react";
|
||
import { useLanguage } from "../context/LanguageContext";
|
||
import {
|
||
blogService,
|
||
BlogPost,
|
||
BlogCategory,
|
||
} from "../services/api/blog.service";
|
||
import { format } from "date-fns";
|
||
import { tr } from "date-fns/locale";
|
||
|
||
const Blog = () => {
|
||
const { t } = useLanguage();
|
||
const [posts, setPosts] = useState<BlogPost[]>([]);
|
||
const [categories, setCategories] = useState<BlogCategory[]>([]);
|
||
const [loading, setLoading] = useState(true);
|
||
const [selectedCategory, setSelectedCategory] = useState<string>("");
|
||
const [searchQuery, setSearchQuery] = useState("");
|
||
const [currentPage, setCurrentPage] = useState(1);
|
||
const [totalPages, setTotalPages] = useState(1);
|
||
|
||
useEffect(() => {
|
||
loadBlogData();
|
||
}, [currentPage, selectedCategory]);
|
||
|
||
const loadBlogData = async () => {
|
||
try {
|
||
setLoading(true);
|
||
const [postsData, categoriesData] = await Promise.all([
|
||
blogService.getPosts({
|
||
page: currentPage,
|
||
pageSize: 10,
|
||
categoryId: selectedCategory,
|
||
search: searchQuery,
|
||
}),
|
||
blogService.getCategories(),
|
||
]);
|
||
|
||
setPosts(postsData.items.filter(a=> a.isPublished));
|
||
setTotalPages(postsData.totalPages);
|
||
setCategories(categoriesData.filter(a=> a.isActive));
|
||
} catch (error) {
|
||
console.error("Blog verileri yüklenemedi:", error);
|
||
setPosts([]);
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
};
|
||
|
||
const handleSearch = (e: React.FormEvent) => {
|
||
e.preventDefault();
|
||
setCurrentPage(1);
|
||
loadBlogData();
|
||
};
|
||
|
||
const handleCategoryChange = (categoryId: string) => {
|
||
setSelectedCategory(categoryId);
|
||
setCurrentPage(1);
|
||
};
|
||
|
||
if (loading && posts.length === 0) {
|
||
return (
|
||
<div className="min-h-screen bg-gray-50 flex items-center justify-center">
|
||
<div className="text-center">
|
||
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto"></div>
|
||
<p className="mt-4 text-gray-600">Blog yazıları yükleniyor...</p>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<div className="min-h-screen bg-gray-50">
|
||
{/* Hero Section */}
|
||
<div className="relative bg-blue-900 text-white py-24">
|
||
<div
|
||
className="absolute inset-0 opacity-20"
|
||
style={{
|
||
backgroundImage:
|
||
'url("https://images.pexels.com/photos/3183160/pexels-photo-3183160.jpeg?auto=compress&cs=tinysrgb&w=1920")',
|
||
backgroundSize: "cover",
|
||
backgroundPosition: "center",
|
||
}}
|
||
></div>
|
||
<div className="container mx-auto pt-16 px-4 relative">
|
||
<h1 className="text-5xl font-bold mb-6">{t("blog.title")}</h1>
|
||
<p className="text-xl max-w-3xl">{t("blog.subtitle")}</p>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Search and Filter Section */}
|
||
<div className="bg-white shadow-sm border-b">
|
||
<div className="container mx-auto px-4 py-6">
|
||
<div className="flex flex-col md:flex-row gap-4">
|
||
{/* Search */}
|
||
<form onSubmit={handleSearch} className="flex-1">
|
||
<div className="relative">
|
||
<input
|
||
type="text"
|
||
value={searchQuery}
|
||
onChange={(e) => setSearchQuery(e.target.value)}
|
||
placeholder="Blog yazılarında ara..."
|
||
className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||
/>
|
||
<Search className="absolute left-3 top-2.5 h-5 w-5 text-gray-400" />
|
||
</div>
|
||
</form>
|
||
|
||
{/* Category Filter */}
|
||
<div className="flex gap-2 flex-wrap">
|
||
<button
|
||
onClick={() => handleCategoryChange("")}
|
||
className={`px-4 py-2 rounded-lg transition-colors ${
|
||
selectedCategory === ""
|
||
? "bg-blue-600 text-white"
|
||
: "bg-gray-200 text-gray-700 hover:bg-gray-300"
|
||
}`}
|
||
>
|
||
Tümü
|
||
</button>
|
||
{categories.map((category) => (
|
||
<button
|
||
key={category.id}
|
||
onClick={() => handleCategoryChange(category.id)}
|
||
className={`px-4 py-2 rounded-lg transition-colors ${
|
||
selectedCategory === category.id
|
||
? "bg-blue-600 text-white"
|
||
: "bg-gray-200 text-gray-700 hover:bg-gray-300"
|
||
}`}
|
||
>
|
||
{ t(category.name)} ({category.postCount})
|
||
</button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Blog Posts Grid */}
|
||
<div className="container mx-auto px-4 py-16">
|
||
{!Array.isArray(posts) || posts.length === 0 ? (
|
||
<div className="text-center py-12">
|
||
<p className="text-gray-600 text-lg">
|
||
Henüz blog yazısı bulunmuyor.
|
||
</p>
|
||
</div>
|
||
) : (
|
||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||
{posts.map((post) => (
|
||
<Link
|
||
to={`/blog/${post.slug || post.id}`}
|
||
key={post.id}
|
||
className="block"
|
||
>
|
||
<article className="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-xl transition-shadow h-full flex flex-col">
|
||
<div className="aspect-w-16 aspect-h-9 relative">
|
||
<img
|
||
src={
|
||
post.coverImage
|
||
}
|
||
alt={post.title}
|
||
className="object-cover w-full h-48"
|
||
/>
|
||
<div className="absolute top-4 right-4 bg-blue-600 text-white px-3 py-1 rounded-full text-sm">
|
||
{t(post.category.name)}
|
||
</div>
|
||
</div>
|
||
<div className="p-6 flex-1 flex flex-col">
|
||
<h2 className="text-xl font-bold text-gray-900 mb-3 hover:text-blue-600 transition-colors">
|
||
{t(post.title)}
|
||
</h2>
|
||
<p className="text-gray-600 mb-4 flex-1">{t(post.summary)}</p>
|
||
|
||
{/* Tags */}
|
||
{post.tags.length > 0 && (
|
||
<div className="flex flex-wrap gap-2 mb-4">
|
||
{post.tags.slice(0, 3).map((tag, index) => (
|
||
<span
|
||
key={index}
|
||
className="inline-flex items-center text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded"
|
||
>
|
||
<Tag className="w-3 h-3 mr-1" />
|
||
{tag}
|
||
</span>
|
||
))}
|
||
</div>
|
||
)}
|
||
|
||
<div className="flex items-center text-sm text-gray-500 space-x-4">
|
||
<div className="flex items-center">
|
||
<User size={16} className="mr-1" />
|
||
{post.author.name}
|
||
</div>
|
||
<div className="flex items-center">
|
||
<Calendar size={16} className="mr-1" />
|
||
{format(
|
||
new Date(post.publishedAt || post.createdAt),
|
||
"dd MMM yyyy",
|
||
{ locale: tr }
|
||
)}
|
||
</div>
|
||
<div className="flex items-center">
|
||
<Clock size={16} className="mr-1" />
|
||
{post.readTime}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</Link>
|
||
))}
|
||
</div>
|
||
)}
|
||
|
||
{/* Pagination */}
|
||
{totalPages > 1 && (
|
||
<div className="mt-12 flex justify-center">
|
||
<nav className="flex gap-2">
|
||
<button
|
||
onClick={() => setCurrentPage(Math.max(1, currentPage - 1))}
|
||
disabled={currentPage === 1}
|
||
className="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
|
||
>
|
||
Önceki
|
||
</button>
|
||
|
||
{[...Array(totalPages)].map((_, i) => (
|
||
<button
|
||
key={i + 1}
|
||
onClick={() => setCurrentPage(i + 1)}
|
||
className={`px-4 py-2 rounded-lg ${
|
||
currentPage === i + 1
|
||
? "bg-blue-600 text-white"
|
||
: "border border-gray-300 hover:bg-gray-50"
|
||
}`}
|
||
>
|
||
{i + 1}
|
||
</button>
|
||
))}
|
||
|
||
<button
|
||
onClick={() =>
|
||
setCurrentPage(Math.min(totalPages, currentPage + 1))
|
||
}
|
||
disabled={currentPage === totalPages}
|
||
className="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
|
||
>
|
||
Sonraki
|
||
</button>
|
||
</nav>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{/* Newsletter Section */}
|
||
<div className="bg-white py-16">
|
||
<div className="container mx-auto px-4 text-center">
|
||
<h2 className="text-3xl font-bold text-gray-900 mb-4">
|
||
{t("blog.subscribe")}
|
||
</h2>
|
||
<p className="text-gray-600 mb-8 max-w-2xl mx-auto">
|
||
{t("blog.subscribe.desc")}
|
||
</p>
|
||
<div className="max-w-md mx-auto flex gap-4">
|
||
<input
|
||
type="email"
|
||
placeholder={t("common.email")}
|
||
className="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||
/>
|
||
<button className="bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700 transition-colors">
|
||
{t("common.subscribe")}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default Blog;
|