287 lines
12 KiB
TypeScript
287 lines
12 KiB
TypeScript
'use client';
|
||
|
||
import { useState } from 'react';
|
||
import Header from "@/components/Header";
|
||
import Footer from "@/components/Footer";
|
||
|
||
export default function MediaGallery() {
|
||
const [selectedTab, setSelectedTab] = useState<'all' | 'video' | 'photo'>('all');
|
||
const [selectedMedia, setSelectedMedia] = useState<number | null>(null);
|
||
|
||
const mediaItems = [
|
||
{
|
||
id: 1,
|
||
type: 'video',
|
||
title: 'A2 Metro Hattı Genel Tanıtım',
|
||
thumbnail: 'https://images.pexels.com/photos/17152223/pexels-photo-17152223.jpeg',
|
||
videoUrl: 'https://www.youtube.com/embed/b9q88QDEcKg',
|
||
date: '15 Ekim 2025',
|
||
duration: '5:32',
|
||
description: 'A2 Metro Hattı projesinin genel tanıtımı ve istasyonların detayları'
|
||
},
|
||
{
|
||
id: 2,
|
||
type: 'photo',
|
||
title: 'Dikimevi İstasyonu İnşaat Çalışmaları',
|
||
thumbnail: 'https://images.pexels.com/photos/17302615/pexels-photo-17302615.jpeg',
|
||
date: '12 Ekim 2025',
|
||
description: 'Dikimevi metro istasyonunda devam eden kazı ve inşaat çalışmaları'
|
||
},
|
||
{
|
||
id: 3,
|
||
type: 'photo',
|
||
title: 'Tuzluçayır İstasyonu Temel Atma',
|
||
thumbnail: 'https://images.pexels.com/photos/33950678/pexels-photo-33950678.jpeg',
|
||
date: '10 Ekim 2025',
|
||
description: 'Tuzluçayır istasyonunun temel atma töreni anları'
|
||
},
|
||
{
|
||
id: 4,
|
||
type: 'video',
|
||
title: 'Metro İnşaatı İlerleme Raporu',
|
||
thumbnail: 'https://images.pexels.com/photos/253647/pexels-photo-253647.jpeg',
|
||
videoUrl: 'https://www.youtube.com/embed/b9q88QDEcKg',
|
||
date: '8 Ekim 2025',
|
||
duration: '8:15',
|
||
description: 'Ekim ayı metro inşaatı ilerleme raporu ve gelecek hedefler'
|
||
},
|
||
{
|
||
id: 5,
|
||
type: 'photo',
|
||
title: 'Modern İstasyon Tasarımları',
|
||
thumbnail: 'https://images.pexels.com/photos/17152223/pexels-photo-17152223.jpeg',
|
||
date: '5 Ekim 2025',
|
||
description: 'Yeni nesil metro istasyonlarının modern iç mekan tasarımları'
|
||
},
|
||
{
|
||
id: 6,
|
||
type: 'video',
|
||
title: 'Çevre Dostu Metro Projesi',
|
||
thumbnail: 'https://images.pexels.com/photos/17302615/pexels-photo-17302615.jpeg',
|
||
videoUrl: 'https://www.youtube.com/embed/b9q88QDEcKg',
|
||
date: '1 Ekim 2025',
|
||
duration: '6:45',
|
||
description: 'Metro projesinde kullanılan çevre dostu teknolojiler ve sürdürülebilir yaklaşımlar'
|
||
},
|
||
{
|
||
id: 7,
|
||
type: 'photo',
|
||
title: 'İşçi Güvenliği Eğitimi',
|
||
thumbnail: 'https://images.pexels.com/photos/33950678/pexels-photo-33950678.jpeg',
|
||
date: '28 Eylül 2025',
|
||
description: 'İnşaat sahalarında iş güvenliği eğitimleri'
|
||
},
|
||
{
|
||
id: 8,
|
||
type: 'photo',
|
||
title: 'Ray Döşeme Çalışmaları',
|
||
thumbnail: 'https://images.pexels.com/photos/253647/pexels-photo-253647.jpeg',
|
||
date: '25 Eylül 2025',
|
||
description: 'Metro hattında ray döşeme işlemlerinin başlaması'
|
||
},
|
||
];
|
||
|
||
const filteredMedia = selectedTab === 'all'
|
||
? mediaItems
|
||
: mediaItems.filter(item => item.type === selectedTab);
|
||
|
||
const selectedMediaItem = selectedMedia !== null
|
||
? mediaItems.find(item => item.id === selectedMedia)
|
||
: null;
|
||
|
||
return (
|
||
<div className="min-h-screen bg-[#003366]">
|
||
<Header />
|
||
|
||
<main className="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">
|
||
Medya Galerisi
|
||
</h1>
|
||
<p className="text-lg text-[#F8F9FA] max-w-2xl mx-auto">
|
||
A2 Metro Hattı projesi ile ilgili videolar ve fotoğraflar
|
||
</p>
|
||
</div>
|
||
|
||
{/* Tab Menü */}
|
||
<div className="flex justify-center space-x-4 mb-8">
|
||
<button
|
||
onClick={() => setSelectedTab('all')}
|
||
className={`px-6 py-3 rounded-lg font-semibold transition-all duration-300 ${
|
||
selectedTab === 'all'
|
||
? 'bg-[#00B4D8] text-white shadow-lg scale-105'
|
||
: 'bg-white text-[#004B87] hover:bg-gray-100'
|
||
}`}
|
||
>
|
||
Tümü
|
||
</button>
|
||
<button
|
||
onClick={() => setSelectedTab('video')}
|
||
className={`px-6 py-3 rounded-lg font-semibold transition-all duration-300 flex items-center space-x-2 ${
|
||
selectedTab === 'video'
|
||
? 'bg-[#00B4D8] text-white shadow-lg scale-105'
|
||
: 'bg-white text-[#004B87] hover:bg-gray-100'
|
||
}`}
|
||
>
|
||
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
||
<path d="M17 10.5V7c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4z"/>
|
||
</svg>
|
||
<span>Videolar</span>
|
||
</button>
|
||
<button
|
||
onClick={() => setSelectedTab('photo')}
|
||
className={`px-6 py-3 rounded-lg font-semibold transition-all duration-300 flex items-center space-x-2 ${
|
||
selectedTab === 'photo'
|
||
? 'bg-[#00B4D8] text-white shadow-lg scale-105'
|
||
: 'bg-white text-[#004B87] hover:bg-gray-100'
|
||
}`}
|
||
>
|
||
<svg className="w-5 h-5" 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>
|
||
<span>Fotoğraflar</span>
|
||
</button>
|
||
</div>
|
||
|
||
{/* Medya Grid */}
|
||
{!selectedMediaItem ? (
|
||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||
{filteredMedia.map((item) => (
|
||
<div
|
||
key={item.id}
|
||
onClick={() => setSelectedMedia(item.id)}
|
||
className="bg-white rounded-xl overflow-hidden shadow-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-2 cursor-pointer group"
|
||
>
|
||
{/* Thumbnail */}
|
||
<div className="relative h-56 overflow-hidden">
|
||
<img
|
||
src={item.thumbnail}
|
||
alt={item.title}
|
||
className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"
|
||
/>
|
||
{/* Video Badge */}
|
||
{item.type === 'video' && (
|
||
<div className="absolute inset-0 flex items-center justify-center bg-black/30 group-hover:bg-black/40 transition-colors">
|
||
<div className="w-16 h-16 rounded-full bg-[#00B4D8] flex items-center justify-center group-hover:scale-110 transition-transform">
|
||
<svg className="w-8 h-8 text-white ml-1" fill="currentColor" viewBox="0 0 24 24">
|
||
<path d="M8 5v14l11-7z"/>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
)}
|
||
{/* Duration Badge */}
|
||
{item.type === 'video' && (
|
||
<div className="absolute bottom-3 right-3 px-2 py-1 bg-black/75 text-white text-xs rounded">
|
||
{item.duration}
|
||
</div>
|
||
)}
|
||
{/* Photo Badge */}
|
||
{item.type === 'photo' && (
|
||
<div className="absolute top-3 right-3 px-3 py-1 bg-[#00B4D8] text-white text-xs rounded-full font-semibold">
|
||
FOTO
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{/* Content */}
|
||
<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>{item.date}</span>
|
||
</div>
|
||
<h3 className="text-lg font-bold text-[#004B87] mb-2 line-clamp-2 group-hover:text-[#00B4D8] transition-colors">
|
||
{item.title}
|
||
</h3>
|
||
<p className="text-gray-600 text-sm line-clamp-2">
|
||
{item.description}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
) : (
|
||
/* Medya Detayı */
|
||
<div className="bg-white rounded-2xl shadow-2xl overflow-hidden animate-fadeIn">
|
||
<div className="p-6 lg:p-8">
|
||
{/* Geri Butonu */}
|
||
<button
|
||
onClick={() => setSelectedMedia(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>Galeriye Dön</span>
|
||
</button>
|
||
|
||
{/* Video Player veya Büyük Fotoğraf */}
|
||
{selectedMediaItem?.type === 'video' ? (
|
||
<div className="relative w-full mb-6" style={{ paddingBottom: '56.25%' }}>
|
||
<iframe
|
||
className="absolute top-0 left-0 w-full h-full rounded-lg"
|
||
src={selectedMediaItem.videoUrl}
|
||
title={selectedMediaItem.title}
|
||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
||
allowFullScreen
|
||
></iframe>
|
||
</div>
|
||
) : (
|
||
<div className="mb-6 rounded-lg overflow-hidden">
|
||
<img
|
||
src={selectedMediaItem?.thumbnail}
|
||
alt={selectedMediaItem?.title}
|
||
className="w-full h-auto"
|
||
/>
|
||
</div>
|
||
)}
|
||
|
||
{/* Bilgiler */}
|
||
<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>{selectedMediaItem?.date}</span>
|
||
{selectedMediaItem?.type === 'video' && (
|
||
<>
|
||
<span className="text-gray-300">•</span>
|
||
<span>{selectedMediaItem?.duration}</span>
|
||
</>
|
||
)}
|
||
</div>
|
||
|
||
<h1 className="text-3xl font-bold text-[#004B87] mb-4">
|
||
{selectedMediaItem?.title}
|
||
</h1>
|
||
|
||
<p className="text-gray-700 text-lg leading-relaxed">
|
||
{selectedMediaItem?.description}
|
||
</p>
|
||
|
||
{/* Paylaş */}
|
||
<div className="mt-8 pt-6 border-t border-gray-200">
|
||
<div className="flex items-center justify-between">
|
||
<div className="flex items-center space-x-4">
|
||
<span className="text-sm text-gray-500">Paylaş:</span>
|
||
<button className="text-[#00B4D8] hover:text-[#004B87] transition-colors">
|
||
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
||
<path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z"/>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</main>
|
||
|
||
<Footer />
|
||
</div>
|
||
);
|
||
}
|