247 lines
9.5 KiB
TypeScript
247 lines
9.5 KiB
TypeScript
'use client';
|
||
|
||
import { useState } from 'react';
|
||
import Header from "@/components/Header";
|
||
import Footer from "@/components/Footer";
|
||
import Link from "next/link";
|
||
|
||
export default function BelgelerPage() {
|
||
const [selectedCategory, setSelectedCategory] = useState<string>('all');
|
||
|
||
const categories = [
|
||
{ id: 'all', name: 'Tümü', icon: '📋' },
|
||
{ id: 'ihale', name: 'İhale Belgeleri', icon: '📄' },
|
||
{ id: 'teknik', name: 'Teknik Dökümanlar', icon: '📐' },
|
||
{ id: 'cevresel', name: 'Çevresel Etki', icon: '🌱' },
|
||
{ id: 'raporlar', name: 'İlerleme Raporları', icon: '📊' },
|
||
];
|
||
|
||
const documents = [
|
||
{
|
||
id: 1,
|
||
title: "A2 Metro Hattı İhale Şartnamesi",
|
||
category: 'ihale',
|
||
date: "15 Ocak 2025",
|
||
size: "2.4 MB",
|
||
type: "PDF",
|
||
description: "Metro inşaatı için teknik şartname ve ihale koşulları"
|
||
},
|
||
{
|
||
id: 2,
|
||
title: "Proje Teknik Çizimleri",
|
||
category: 'teknik',
|
||
date: "10 Şubat 2025",
|
||
size: "15.8 MB",
|
||
type: "DWG",
|
||
description: "Tüm istasyonların teknik mimari çizimleri"
|
||
},
|
||
{
|
||
id: 3,
|
||
title: "Çevresel Etki Değerlendirme Raporu",
|
||
category: 'cevresel',
|
||
date: "5 Mart 2025",
|
||
size: "4.2 MB",
|
||
type: "PDF",
|
||
description: "Proje çevresel etki analizi ve önlemler"
|
||
},
|
||
{
|
||
id: 4,
|
||
title: "2025 Mart Ayı İlerleme Raporu",
|
||
category: 'raporlar',
|
||
date: "1 Nisan 2025",
|
||
size: "1.8 MB",
|
||
type: "PDF",
|
||
description: "Aylık proje ilerleme ve istatistikler"
|
||
},
|
||
{
|
||
id: 5,
|
||
title: "Güvenlik Planı ve Prosedürleri",
|
||
category: 'teknik',
|
||
date: "20 Ocak 2025",
|
||
size: "3.1 MB",
|
||
type: "PDF",
|
||
description: "İnşaat sahası güvenlik protokolleri"
|
||
},
|
||
{
|
||
id: 6,
|
||
title: "İstasyon Tasarım Detayları",
|
||
category: 'teknik',
|
||
date: "8 Şubat 2025",
|
||
size: "8.5 MB",
|
||
type: "PDF",
|
||
description: "İstasyon iç ve dış mekan tasarım detayları"
|
||
},
|
||
{
|
||
id: 7,
|
||
title: "Finansman Planı",
|
||
category: 'ihale',
|
||
date: "12 Ocak 2025",
|
||
size: "1.2 MB",
|
||
type: "XLSX",
|
||
description: "Proje bütçe ve finansman dağılımı"
|
||
},
|
||
{
|
||
id: 8,
|
||
title: "2025 Nisan Ayı İlerleme Raporu",
|
||
category: 'raporlar',
|
||
date: "1 Mayıs 2025",
|
||
size: "2.1 MB",
|
||
type: "PDF",
|
||
description: "Aylık proje ilerleme ve istatistikler"
|
||
},
|
||
{
|
||
id: 9,
|
||
title: "Gürültü ve Titreşim Analizi",
|
||
category: 'cevresel',
|
||
date: "18 Mart 2025",
|
||
size: "3.8 MB",
|
||
type: "PDF",
|
||
description: "Çevre gürültü ve titreşim ölçüm sonuçları"
|
||
},
|
||
];
|
||
|
||
const filteredDocs = selectedCategory === 'all'
|
||
? documents
|
||
: documents.filter(doc => doc.category === selectedCategory);
|
||
|
||
const getFileIcon = (type: string) => {
|
||
switch (type) {
|
||
case 'PDF': return '📕';
|
||
case 'DWG': return '📐';
|
||
case 'XLSX': return '📊';
|
||
default: return '📄';
|
||
}
|
||
};
|
||
|
||
return (
|
||
<div className="min-h-screen bg-[#F8F9FA]">
|
||
<Header />
|
||
|
||
{/* Hero Section */}
|
||
<div className="bg-linear-to-r from-[#003366] via-[#004B87] to-[#003366] py-16">
|
||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div className="flex items-center space-x-2 text-white/80 text-sm mb-4">
|
||
<Link href="/" className="hover:text-white transition-colors">Ana Sayfa</Link>
|
||
<span>/</span>
|
||
<span>Belgeler</span>
|
||
</div>
|
||
<h1 className="text-4xl font-bold text-white mb-4">Proje Belgeleri</h1>
|
||
<p className="text-lg text-white/90 max-w-3xl">
|
||
A2 Metro Hattı inşaat projesine ait tüm resmi belgeler, teknik dökümanlar ve raporlar.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Main Content */}
|
||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
|
||
{/* Kategori Filtreleri */}
|
||
<div className="bg-white rounded-2xl shadow-lg p-6 mb-8">
|
||
<h2 className="text-xl font-bold text-[#004B87] mb-4">Kategoriler</h2>
|
||
<div className="flex flex-wrap gap-3">
|
||
{categories.map((cat) => (
|
||
<button
|
||
key={cat.id}
|
||
onClick={() => setSelectedCategory(cat.id)}
|
||
className={`flex items-center space-x-2 px-5 py-3 rounded-lg font-medium transition-all duration-300 ${
|
||
selectedCategory === cat.id
|
||
? 'bg-[#00B4D8] text-white shadow-lg scale-105'
|
||
: 'bg-gray-100 text-gray-700 hover:bg-gray-200'
|
||
}`}
|
||
>
|
||
<span className="text-xl">{cat.icon}</span>
|
||
<span>{cat.name}</span>
|
||
</button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Belgeler Listesi */}
|
||
<div className="grid grid-cols-1 gap-6">
|
||
{filteredDocs.map((doc) => (
|
||
<div
|
||
key={doc.id}
|
||
className="bg-white rounded-xl shadow-md hover:shadow-xl transition-all duration-300 overflow-hidden group"
|
||
>
|
||
<div className="p-6 flex items-start space-x-4">
|
||
{/* Dosya İkonu */}
|
||
<div className="w-16 h-16 bg-linear-to-br from-[#00B4D8] to-[#004B87] rounded-xl flex items-center justify-center text-3xl shrink-0 group-hover:scale-110 transition-transform duration-300">
|
||
{getFileIcon(doc.type)}
|
||
</div>
|
||
|
||
{/* Belge Bilgileri */}
|
||
<div className="flex-1 min-w-0">
|
||
<h3 className="text-lg font-bold text-[#004B87] mb-2 group-hover:text-[#00B4D8] transition-colors">
|
||
{doc.title}
|
||
</h3>
|
||
<p className="text-gray-600 text-sm mb-3">
|
||
{doc.description}
|
||
</p>
|
||
<div className="flex flex-wrap gap-4 text-sm text-gray-500">
|
||
<div className="flex items-center space-x-1">
|
||
<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>{doc.date}</span>
|
||
</div>
|
||
<div className="flex items-center space-x-1">
|
||
<svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
|
||
<path fillRule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4z" clipRule="evenodd" />
|
||
</svg>
|
||
<span>{doc.type}</span>
|
||
</div>
|
||
<div className="flex items-center space-x-1">
|
||
<svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
|
||
<path d="M3 12v3c0 1.657 3.134 3 7 3s7-1.343 7-3v-3c0 1.657-3.134 3-7 3s-7-1.343-7-3z" />
|
||
<path d="M3 7v3c0 1.657 3.134 3 7 3s7-1.343 7-3V7c0 1.657-3.134 3-7 3S3 8.657 3 7z" />
|
||
<path d="M17 5c0 1.657-3.134 3-7 3S3 6.657 3 5s3.134-3 7-3 7 1.343 7 3z" />
|
||
</svg>
|
||
<span>{doc.size}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* İndirme Butonu */}
|
||
<button className="px-5 py-3 bg-[#00B4D8] text-white rounded-lg hover:bg-[#004B87] transition-colors shadow-md hover:shadow-lg flex items-center space-x-2 shrink-0">
|
||
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
|
||
</svg>
|
||
<span className="font-medium">İndir</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
{/* Boş Sonuç */}
|
||
{filteredDocs.length === 0 && (
|
||
<div className="bg-white rounded-xl shadow-md p-12 text-center">
|
||
<div className="text-6xl mb-4">📭</div>
|
||
<h3 className="text-xl font-bold text-gray-700 mb-2">Belge Bulunamadı</h3>
|
||
<p className="text-gray-500">Bu kategoride henüz belge bulunmamaktadır.</p>
|
||
</div>
|
||
)}
|
||
|
||
{/* Bilgilendirme */}
|
||
<div className="mt-8 bg-blue-50 border-l-4 border-[#00B4D8] p-6 rounded-lg">
|
||
<div className="flex items-start space-x-3">
|
||
<svg className="w-6 h-6 text-[#00B4D8] shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
|
||
<path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clipRule="evenodd" />
|
||
</svg>
|
||
<div>
|
||
<h3 className="font-bold text-[#004B87] mb-1">Önemli Not</h3>
|
||
<p className="text-gray-700 text-sm">
|
||
Tüm belgeler resmi kaynaklardan alınmıştır. Belgelerin kullanımı ile ilgili sorularınız için
|
||
<a href="https://www.ankara.bel.tr/" target="_blank" rel="noopener noreferrer" className="text-[#00B4D8] hover:underline ml-1">
|
||
Ankara Büyükşehir Belediyesi
|
||
</a> ile iletişime geçebilirsiniz.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<Footer />
|
||
</div>
|
||
);
|
||
}
|