agartha/gulermak_metro
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Ana Sayfa Fix

Browse Source
This commit is contained in:
Şahan Hasret
2025-11-18 15:19:50 +03:00
parent ab43ad61e9
commit 08c426f97b
14 changed files with 2764 additions and 1139 deletions
Download Patch File Download Diff File Expand all files Collapse all files

165
components/NewsSection.tsx Normal file
View File

@@ -0,0 +1,165 @@
'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>
);
}