71 lines
3.1 KiB
TypeScript
71 lines
3.1 KiB
TypeScript
|
import React from 'react';
|
|||
|
|
import { Link, useParams } from 'react-router-dom'; // Link ve useParams'ı import et
|
|||
|
|
import { useLanguage } from '../context/LanguageContext'; // useLanguage hook'unu import et
|
|||
|
|
import { blogContent, BlogPostContent } from '../locales/blogContent'; // blogContent ve BlogPostContent interface'ini import et
|
|||
|
|
|
|||
|
|
const BlogDetail: React.FC = () => {
|
|||
|
|
const { id } = useParams<{ id: string }>();
|
|||
|
|
const { t, language } = useLanguage(); // useLanguage hook'unu kullan ve dil bilgisini al
|
|||
|
|
|
|||
|
|
// Basit slug oluşturma fonksiyonu (Blog.tsx'teki ile aynı olmalı)
|
|||
|
|
const createSlug = (title: string) => {
|
|||
|
|
return title
|
|||
|
|
.toLowerCase()
|
|||
|
|
.replace(/ /g, '-')
|
|||
|
|
.replace(/[^\w-]+/g, '');
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// URL'deki slug'a göre blog yazısını bul
|
|||
|
|
// blogContent objesinden slug'a karşılık gelen blog yazısını ve mevcut dile göre içeriğini al
|
|||
|
|
const postData = blogContent[id || '']; // id undefined olabilir, boş string ile kontrol et
|
|||
|
|
const blogPost = postData ? postData[language as 'tr' | 'en'] : undefined; // Mevcut dile göre içeriği al
|
|||
|
|
|
|||
|
|
if (!blogPost) {
|
|||
|
|
return (
|
|||
|
|
<div className="min-h-screen bg-gray-50 flex items-center justify-center">
|
|||
|
|
<h1 className="text-2xl font-bold text-gray-900">{t('blog.notFound')}</h1> {/* Çeviri kullan */}
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className="min-h-screen bg-gray-50 pt-32 pb-16"> {/* py-16 yerine pt-32 pb-16 kullanıldı */}
|
|||
|
|
<div className="container mx-auto px-4">
|
|||
|
|
<Link to="/blog" className="text-blue-600 hover:underline mb-4 inline-block">
|
|||
|
|
← {t('blog.backToBlog')} {/* Geri dönüş butonu */}
|
|||
|
|
</Link>
|
|||
|
|
{/* Blog yazısı görseli */}
|
|||
|
|
{postData.image && (
|
|||
|
|
<img
|
|||
|
|
src={postData.image} // Görsel bilgisi blogContent'ten alınıyor
|
|||
|
|
alt={t(blogPost.title)} // Alt metni çevir
|
|||
|
|
className="w-full h-96 object-cover rounded-lg mb-8"
|
|||
|
|
/>
|
|||
|
|
)}
|
|||
|
|
<h1 className="text-4xl font-bold text-gray-900 mb-6">{t(blogPost.title)}</h1> {/* Çeviri kullan */}
|
|||
|
|
{/* Yazar, tarih, okuma süresi gibi bilgiler eklenebilir */}
|
|||
|
|
<div className="flex items-center text-sm text-gray-500 space-x-4 mb-8">
|
|||
|
|
<div className="flex items-center">
|
|||
|
|
{/* <User size={16} className="mr-1" /> */} {/* İkonlar eklenebilir */}
|
|||
|
|
<span>{postData.author}</span> {/* Yazar bilgisi blogContent'ten alınıyor */}
|
|||
|
|
</div>
|
|||
|
|
<div className="flex items-center">
|
|||
|
|
{/* <Calendar size={16} className="mr-1" /> */}
|
|||
|
|
{t(blogPost.date)} {/* Çeviri kullan */}
|
|||
|
|
</div>
|
|||
|
|
<div className="flex items-center">
|
|||
|
|
{/* <Clock size={16} className="mr-1" /> */}
|
|||
|
|
{blogPost.readTime}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div className="prose max-w-none text-gray-800"> {/* Tailwind Typography eklentisi kuruluysa kullanılabilir */}
|
|||
|
|
<p>{t(blogPost.content)}</p> {/* Tam içeriği çevirerek göster */}
|
|||
|
|
{/* Daha uzun içerik burada paragraflar halinde yer alabilir */}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
export default BlogDetail;
|