219 lines
11 KiB
TypeScript
219 lines
11 KiB
TypeScript
'use client';
|
||
|
||
import { useState, useEffect } from 'react';
|
||
import Image from 'next/image';
|
||
import Header from "@/components/Header";
|
||
import Footer from "@/components/Footer";
|
||
import { dataStore } from '@/lib/dataStore';
|
||
import { categories, type NewsItem } from '@/data/news';
|
||
|
||
export default function News() {
|
||
const [newsData, setNewsData] = useState<NewsItem[]>([]);
|
||
const [selectedCategory, setSelectedCategory] = useState('all');
|
||
const [selectedNews, setSelectedNews] = useState<number | null>(null);
|
||
|
||
useEffect(() => {
|
||
dataStore.getNews().then(setNewsData);
|
||
}, []);
|
||
|
||
const filteredNews = selectedCategory === 'all'
|
||
? newsData
|
||
: newsData.filter(item => item.category === selectedCategory);
|
||
|
||
const selectedNewsItem = newsData.find(item => item.id === selectedNews);
|
||
|
||
return (
|
||
<div className="min-h-screen bg-[#003366]">
|
||
<Header />
|
||
|
||
<main className="pt-24 md:pt-32 pb-16">
|
||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
{/* Başlık */}
|
||
<div className="text-center mb-12">
|
||
<h1 className="text-4xl font-bold text-white mb-4">Haberler ve Duyurular</h1>
|
||
<p className="text-lg text-[#F8F9FA] max-w-2xl mx-auto">
|
||
A2 Metro Hattı projesi ile ilgili güncel haberler, duyurular ve etkinlikler
|
||
</p>
|
||
</div>
|
||
|
||
{/* Kategori Filtreleri */}
|
||
<div className="flex flex-wrap justify-center gap-2 md:gap-3 mb-12">
|
||
{categories.map((category) => (
|
||
<button
|
||
key={category.id}
|
||
onClick={() => setSelectedCategory(category.id)}
|
||
className={`px-4 py-2 md:px-6 md:py-3 rounded-full font-semibold text-sm md:text-base transition-all duration-300 flex items-center space-x-2 ${
|
||
selectedCategory === category.id
|
||
? 'bg-[#00B4D8] text-white shadow-lg scale-105'
|
||
: 'bg-white text-[#004B87] hover:bg-gray-100'
|
||
}`}
|
||
>
|
||
<span>{category.icon}</span>
|
||
<span>{category.name}</span>
|
||
</button>
|
||
))}
|
||
</div>
|
||
|
||
{/* Haber Grid */}
|
||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||
{filteredNews.map((item) => (
|
||
<div
|
||
key={item.id}
|
||
onClick={() => setSelectedNews(item.id)}
|
||
className="bg-white rounded-2xl shadow-lg overflow-hidden cursor-pointer transform transition-all duration-300 hover:scale-105 hover:shadow-2xl"
|
||
>
|
||
{/* Görsel */}
|
||
<div className="relative h-48 overflow-hidden">
|
||
<Image
|
||
src={item.image}
|
||
alt={item.title}
|
||
width={400}
|
||
height={192}
|
||
className="w-full h-full object-cover transition-transform duration-300 hover:scale-110"
|
||
/>
|
||
<div className="absolute top-3 left-3">
|
||
<span className="px-3 py-1 bg-[#00B4D8] text-white text-xs font-semibold rounded-full">
|
||
{categories.find(c => c.id === item.category)?.name}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
{/* İçerik */}
|
||
<div className="p-6">
|
||
<div className="flex items-center space-x-2 text-xs text-gray-500 mb-3">
|
||
<svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
|
||
<path fillRule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clipRule="evenodd" />
|
||
</svg>
|
||
<span>{item.date}</span>
|
||
</div>
|
||
|
||
<h3 className="text-xl font-bold text-[#004B87] mb-3 line-clamp-2">
|
||
{item.title}
|
||
</h3>
|
||
|
||
<p className="text-gray-600 text-sm mb-4 line-clamp-3">
|
||
{item.summary}
|
||
</p>
|
||
|
||
<div className="flex items-center justify-between">
|
||
<span className="text-xs text-gray-500">
|
||
{item.author}
|
||
</span>
|
||
<button className="text-[#00B4D8] font-semibold text-sm hover:text-[#004B87] transition-colors">
|
||
Devamını Oku →
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
{/* Haber Bulunamadı */}
|
||
{filteredNews.length === 0 && (
|
||
<div className="text-center py-16">
|
||
<div className="text-6xl mb-4">📰</div>
|
||
<h3 className="text-2xl font-bold text-white mb-2">Henüz Haber Yok</h3>
|
||
<p className="text-[#F8F9FA]">Bu kategoride henüz haber bulunmuyor.</p>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</main>
|
||
|
||
{/* Haber Detay Modal */}
|
||
{selectedNewsItem && (
|
||
<div className="fixed inset-0 bg-black/70 backdrop-blur-sm z-50 flex items-center justify-center p-4 animate-fadeIn">
|
||
<div className="bg-white rounded-2xl max-w-4xl w-full max-h-[90vh] overflow-y-auto">
|
||
{/* Görsel */}
|
||
<div className="relative h-64 md:h-96">
|
||
<Image
|
||
src={selectedNewsItem.image}
|
||
alt={selectedNewsItem.title}
|
||
width={800}
|
||
height={384}
|
||
className="w-full h-full object-cover"
|
||
/>
|
||
<button
|
||
onClick={() => setSelectedNews(null)}
|
||
className="absolute top-4 right-4 w-10 h-10 bg-white rounded-full flex items-center justify-center hover:bg-gray-100 transition-colors shadow-lg"
|
||
>
|
||
<svg className="w-6 h-6 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
||
</svg>
|
||
</button>
|
||
<div className="absolute bottom-4 left-4">
|
||
<span className="px-4 py-2 bg-[#00B4D8] text-white font-semibold rounded-full">
|
||
{categories.find(c => c.id === selectedNewsItem.category)?.name}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
{/* İçerik */}
|
||
<div className="p-8">
|
||
<div className="flex items-center space-x-4 text-sm text-gray-500 mb-4">
|
||
<div className="flex items-center space-x-1">
|
||
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
|
||
<path fillRule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clipRule="evenodd" />
|
||
</svg>
|
||
<span>{selectedNewsItem.date}</span>
|
||
</div>
|
||
<div className="flex items-center space-x-1">
|
||
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
|
||
<path fillRule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clipRule="evenodd" />
|
||
</svg>
|
||
<span>{selectedNewsItem.author}</span>
|
||
</div>
|
||
</div>
|
||
|
||
<h2 className="text-3xl font-bold text-[#004B87] mb-6">
|
||
{selectedNewsItem.title}
|
||
</h2>
|
||
|
||
<p className="text-gray-700 text-lg leading-relaxed mb-6">
|
||
{selectedNewsItem.content}
|
||
</p>
|
||
|
||
{/* Etiketler */}
|
||
<div className="flex flex-wrap gap-2 mb-6">
|
||
{selectedNewsItem.tags.map((tag, index) => (
|
||
<span
|
||
key={index}
|
||
className="px-3 py-1 bg-gray-100 text-gray-700 text-sm rounded-full"
|
||
>
|
||
#{tag}
|
||
</span>
|
||
))}
|
||
</div>
|
||
|
||
{/* Paylaş */}
|
||
<div className="border-t pt-6">
|
||
<div className="flex items-center justify-between">
|
||
<span className="text-gray-600 font-semibold">Haberi Paylaş:</span>
|
||
<div className="flex space-x-3">
|
||
<button className="w-10 h-10 bg-blue-600 text-white rounded-full flex items-center justify-center hover:bg-blue-700 transition-colors">
|
||
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
||
<path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
|
||
</svg>
|
||
</button>
|
||
<button className="w-10 h-10 bg-sky-500 text-white rounded-full flex items-center justify-center hover:bg-sky-600 transition-colors">
|
||
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
||
<path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"/>
|
||
</svg>
|
||
</button>
|
||
<button className="w-10 h-10 bg-green-600 text-white rounded-full flex items-center justify-center hover:bg-green-700 transition-colors">
|
||
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
||
<path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.890-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z"/>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
<Footer />
|
||
</div>
|
||
);
|
||
}
|