166 lines
7.3 KiB
TypeScript
166 lines
7.3 KiB
TypeScript
'use client';
|
||
|
||
import { useState } from 'react';
|
||
import Image from 'next/image';
|
||
import Link from 'next/link';
|
||
import { newsData } from '@/data/news';
|
||
|
||
interface NewsSectionProps {
|
||
show: boolean;
|
||
onClose: () => void;
|
||
showLiveStream: boolean;
|
||
}
|
||
|
||
export default function NewsSection({ show, onClose, showLiveStream }: NewsSectionProps) {
|
||
const [selectedNews, setSelectedNews] = useState<number | null>(null);
|
||
|
||
if (!show) return null;
|
||
|
||
const featuredNews = newsData.filter(news => news.featured).slice(0, 4);
|
||
|
||
return (
|
||
<div className={`max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 ${showLiveStream ? 'pt-8' : 'pt-8 md:pt-32'} pb-8`}>
|
||
<div className="bg-white rounded-2xl shadow-2xl p-6 lg:p-8">
|
||
<div className="flex items-center justify-between mb-6">
|
||
<div className="flex items-center space-x-3">
|
||
<div className="w-10 h-10 bg-[#004B87] rounded-lg flex items-center justify-center">
|
||
<svg className="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24">
|
||
<path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-4.86 8.86l-3 3.87L9 13.14 6 17h12l-3.86-5.14z"/>
|
||
</svg>
|
||
</div>
|
||
<h2 className="text-2xl font-bold text-[#004B87]">Son Haberler</h2>
|
||
</div>
|
||
<div className="flex items-center space-x-3">
|
||
<Link
|
||
href="/haberler"
|
||
className="px-4 py-2 bg-[#00B4D8] text-white rounded-lg hover:bg-[#0096C7] transition-all font-semibold text-sm flex items-center space-x-2"
|
||
>
|
||
<span>Tümünü Gör</span>
|
||
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
|
||
</svg>
|
||
</Link>
|
||
<button
|
||
onClick={onClose}
|
||
className="text-gray-500 hover:text-red-500 transition-colors"
|
||
>
|
||
<svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Haberler Grid veya Detay */}
|
||
{selectedNews === null ? (
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||
{featuredNews.map((news) => (
|
||
<div key={news.id} className="bg-gray-50 rounded-xl overflow-hidden hover:shadow-lg transition-all duration-300 hover:-translate-y-1">
|
||
{/* Haber Görseli */}
|
||
<div className="h-48 overflow-hidden">
|
||
<Image
|
||
src={news.image}
|
||
alt={news.title}
|
||
width={400}
|
||
height={192}
|
||
className="w-full h-full object-cover hover:scale-110 transition-transform duration-500"
|
||
/>
|
||
</div>
|
||
|
||
{/* Haber İçeriği */}
|
||
<div className="p-5">
|
||
<div className="flex items-center space-x-2 text-sm text-gray-500 mb-2">
|
||
<svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
|
||
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z"/>
|
||
</svg>
|
||
<span>{news.date}</span>
|
||
</div>
|
||
<h3 className="text-lg font-bold text-[#004B87] mb-2 line-clamp-2">
|
||
{news.title}
|
||
</h3>
|
||
<p className="text-gray-600 text-sm line-clamp-3 mb-4">
|
||
{news.summary}
|
||
</p>
|
||
<button
|
||
onClick={() => setSelectedNews(news.id)}
|
||
className="text-[#00B4D8] hover:text-[#004B87] font-semibold text-sm flex items-center space-x-1 transition-colors"
|
||
>
|
||
<span>Devamını Oku</span>
|
||
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
) : (
|
||
/* Haber Detayı */
|
||
<div className="animate-fadeIn">
|
||
{newsData.filter(n => n.id === selectedNews).map((news) => (
|
||
<div key={news.id}>
|
||
{/* Geri Butonu */}
|
||
<button
|
||
onClick={() => setSelectedNews(null)}
|
||
className="flex items-center space-x-2 text-[#00B4D8] hover:text-[#004B87] font-semibold mb-6 transition-colors"
|
||
>
|
||
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
|
||
</svg>
|
||
<span>Haberlere Dön</span>
|
||
</button>
|
||
|
||
{/* Detay İçerik */}
|
||
<div className="bg-white rounded-xl overflow-hidden">
|
||
{/* Büyük Görsel */}
|
||
<div className="h-96 overflow-hidden">
|
||
<Image
|
||
src={news.image}
|
||
alt={news.title}
|
||
width={800}
|
||
height={384}
|
||
className="w-full h-full object-cover"
|
||
/>
|
||
</div>
|
||
|
||
{/* Detay Metni */}
|
||
<div className="p-8">
|
||
<div className="flex items-center space-x-2 text-sm text-gray-500 mb-4">
|
||
<svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
|
||
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z"/>
|
||
</svg>
|
||
<span>{news.date}</span>
|
||
<span className="mx-2">•</span>
|
||
<span>{news.author}</span>
|
||
</div>
|
||
|
||
<h1 className="text-3xl font-bold text-[#004B87] mb-4">
|
||
{news.title}
|
||
</h1>
|
||
|
||
<p className="text-gray-700 text-lg leading-relaxed mb-6">
|
||
{news.content}
|
||
</p>
|
||
|
||
{/* Tags */}
|
||
<div className="flex flex-wrap gap-2">
|
||
{news.tags.map((tag, index) => (
|
||
<span
|
||
key={index}
|
||
className="px-3 py-1 bg-[#00B4D8]/10 text-[#004B87] rounded-full text-sm font-semibold"
|
||
>
|
||
#{tag}
|
||
</span>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|