232 lines
11 KiB
TypeScript
232 lines
11 KiB
TypeScript
'use client';
|
||
|
||
import { useState, useEffect } from 'react';
|
||
import Image from 'next/image';
|
||
import { dataStore } from '@/lib/dataStore';
|
||
import type { MediaItem } from '@/data/media';
|
||
|
||
interface MediaGalleryProps {
|
||
onClose: () => void;
|
||
}
|
||
|
||
export default function MediaGallery({ onClose }: MediaGalleryProps) {
|
||
const [mediaItems, setMediaItems] = useState<MediaItem[]>([]);
|
||
const [selectedMediaTab, setSelectedMediaTab] = useState<'all' | 'video' | 'photo'>('all');
|
||
const [selectedMedia, setSelectedMedia] = useState<number | null>(null);
|
||
|
||
useEffect(() => {
|
||
setMediaItems(dataStore.getMedia());
|
||
}, []);
|
||
|
||
const filteredMedia = selectedMediaTab === 'all'
|
||
? mediaItems
|
||
: mediaItems.filter(item => item.type === selectedMediaTab);
|
||
|
||
const handleClose = () => {
|
||
setSelectedMedia(null);
|
||
setSelectedMediaTab('all');
|
||
onClose();
|
||
};
|
||
|
||
return (
|
||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-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="M4 6h18V4H4c-1.1 0-2 .9-2 2v11H0v3h14v-3H4V6zm19 2h-6c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h6c.55 0 1-.45 1-1V9c0-.55-.45-1-1-1zm-1 9h-4v-7h4v7z"/>
|
||
</svg>
|
||
</div>
|
||
<h2 className="text-2xl font-bold text-[#004B87]">Medya Galerisi</h2>
|
||
</div>
|
||
<button
|
||
onClick={handleClose}
|
||
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>
|
||
|
||
{/* Medya Grid veya Detay */}
|
||
{selectedMedia === null ? (
|
||
<>
|
||
{/* Tab Menü */}
|
||
<div className="flex justify-center space-x-4 mb-8">
|
||
<button
|
||
onClick={() => setSelectedMediaTab('all')}
|
||
className={`px-6 py-3 rounded-lg font-semibold transition-all duration-300 ${
|
||
selectedMediaTab === 'all'
|
||
? 'bg-[#00B4D8] text-white shadow-lg scale-105'
|
||
: 'bg-gray-100 text-[#004B87] hover:bg-gray-200'
|
||
}`}
|
||
>
|
||
Tümü
|
||
</button>
|
||
<button
|
||
onClick={() => setSelectedMediaTab('video')}
|
||
className={`px-6 py-3 rounded-lg font-semibold transition-all duration-300 flex items-center space-x-2 ${
|
||
selectedMediaTab === 'video'
|
||
? 'bg-[#00B4D8] text-white shadow-lg scale-105'
|
||
: 'bg-gray-100 text-[#004B87] hover:bg-gray-200'
|
||
}`}
|
||
>
|
||
<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={() => setSelectedMediaTab('photo')}
|
||
className={`px-6 py-3 rounded-lg font-semibold transition-all duration-300 flex items-center space-x-2 ${
|
||
selectedMediaTab === 'photo'
|
||
? 'bg-[#00B4D8] text-white shadow-lg scale-105'
|
||
: 'bg-gray-100 text-[#004B87] hover:bg-gray-200'
|
||
}`}
|
||
>
|
||
<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 */}
|
||
<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-gray-50 rounded-xl overflow-hidden hover:shadow-lg transition-all duration-300 hover:-translate-y-2 cursor-pointer group"
|
||
>
|
||
{/* Thumbnail */}
|
||
<div className="relative h-56 overflow-hidden">
|
||
<Image
|
||
src={item.thumbnail}
|
||
alt={item.title}
|
||
width={400}
|
||
height={224}
|
||
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>
|
||
)}
|
||
{/* 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="animate-fadeIn">
|
||
{mediaItems.filter(m => m.id === selectedMedia).map((item) => (
|
||
<div key={item.id}>
|
||
{/* 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 */}
|
||
{item.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={item.videoUrl}
|
||
title={item.title}
|
||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
||
allowFullScreen
|
||
></iframe>
|
||
</div>
|
||
) : (
|
||
<div className="mb-6 rounded-lg overflow-hidden">
|
||
<Image
|
||
src={item.thumbnail}
|
||
alt={item.title}
|
||
width={800}
|
||
height={600}
|
||
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>{item.date}</span>
|
||
</div>
|
||
|
||
<h1 className="text-3xl font-bold text-[#004B87] mb-4">
|
||
{item.title}
|
||
</h1>
|
||
|
||
<p className="text-gray-700 text-lg leading-relaxed">
|
||
{item.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>
|
||
<button
|
||
onClick={() => setSelectedMedia(null)}
|
||
className="px-6 py-2 bg-[#00B4D8] text-white rounded-lg hover:bg-[#004B87] transition-colors"
|
||
>
|
||
Kapat
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|