84 lines
3.2 KiB
TypeScript
84 lines
3.2 KiB
TypeScript
'use client';
|
||
|
||
import { useState, useEffect } from 'react';
|
||
import Header from "@/components/Header";
|
||
import Footer from "@/components/Footer";
|
||
import { dataStore } from '@/lib/dataStore';
|
||
import type { Document } from '@/data/documents';
|
||
|
||
export default function Documents() {
|
||
const [documents, setDocuments] = useState<Document[]>([]);
|
||
const [selectedCategory, setSelectedCategory] = useState('all');
|
||
|
||
useEffect(() => {
|
||
dataStore.getDocuments().then(setDocuments);
|
||
}, []);
|
||
|
||
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: '📊' },
|
||
{ id: 'guvenlik', name: 'Güvenlik', icon: '🛡️' },
|
||
];
|
||
|
||
const filteredDocs = selectedCategory === 'all' ? documents : documents.filter(d => d.category === selectedCategory);
|
||
|
||
const getFileIcon = (type: string) => {
|
||
switch (type) {
|
||
case 'PDF': return '📕';
|
||
case 'DWG': return '📐';
|
||
case 'XLSX': return '📊';
|
||
case 'DOCX': return '📝';
|
||
default: return '📄';
|
||
}
|
||
};
|
||
|
||
return (
|
||
<div className="min-h-screen bg-[#003366]">
|
||
<Header />
|
||
<main className="pt-24 md:pt-32 pb-16">
|
||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div className="text-center mb-12">
|
||
<h1 className="text-4xl font-bold text-white mb-4">Belgeler</h1>
|
||
<p className="text-lg text-white">A2 Metro Hattı proje belgeleri</p>
|
||
</div>
|
||
|
||
<div className="flex flex-wrap justify-center gap-2 md:gap-3 mb-12">
|
||
{categories.map((cat) => (
|
||
<button
|
||
key={cat.id}
|
||
onClick={() => setSelectedCategory(cat.id)}
|
||
className={`px-3 py-2 md:px-6 md:py-3 rounded-full font-semibold text-sm md:text-base transition-all ${
|
||
selectedCategory === cat.id ? 'bg-[#00B4D8] text-white shadow-lg scale-105' : 'bg-white text-[#004B87] hover:bg-gray-100'
|
||
}`}
|
||
>
|
||
<span className="mr-1">{cat.icon}</span>
|
||
<span className="hidden sm:inline">{cat.name}</span>
|
||
<span className="sm:hidden">{cat.name.split(' ')[0]}</span>
|
||
</button>
|
||
))}
|
||
</div>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||
{filteredDocs.map((doc) => (
|
||
<div key={doc.id} className="bg-white rounded-2xl p-6">
|
||
<div className="text-4xl mb-4">{getFileIcon(doc.type)}</div>
|
||
<h3 className="text-xl font-bold text-[#004B87] mb-2">{doc.title}</h3>
|
||
<p className="text-gray-600 text-sm mb-4">{doc.description}</p>
|
||
<div className="text-xs text-gray-500 mb-4">
|
||
<div>{doc.date}</div>
|
||
<div>{doc.size}</div>
|
||
</div>
|
||
<button className="w-full bg-[#00B4D8] text-white py-2 rounded-lg">İndir</button>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</main>
|
||
<Footer />
|
||
</div>
|
||
);
|
||
}
|