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

Build

Browse Source
This commit is contained in:
Şahan Hasret
2025-11-20 16:50:28 +03:00
parent 08c426f97b
commit c0b7fb463e
15 changed files with 1395 additions and 646 deletions
Download Patch File Download Diff File Expand all files Collapse all files

128
components/MetroLine.tsx
View File

@@ -39,28 +39,51 @@ export default function MetroLine() {
}, []);
const getStationStyle = (index: number, station: MetroStation) => {
// Seçili istasyonun index'ini bul
const selectedIndex = selectedStationId
? stations.findIndex(s => s.id === selectedStationId)
: -1;
// Animasyonda şu an bulunulan istasyon (sarı - metro treni burada)
if (index === currentStationIndex) {
return 'w-16 h-16 bg-[#F59E0B] border-4 border-white shadow-2xl scale-110';
}
if (station.status === 'completed' || index < currentStationIndex) {
// Seçili istasyondan ÖNCE olanlar - Tamamlandı (yeşil)
if (selectedIndex !== -1 && index < selectedIndex) {
return 'w-14 h-14 bg-green-500 border-4 border-white shadow-lg';
}
if (station.status === 'in-progress') {
// Seçili istasyon - Şu an inşaat aşamasında (mavi)
if (index === selectedIndex) {
return 'w-14 h-14 bg-blue-500 border-4 border-white shadow-lg';
}
// Seçili istasyondan SONRA olanlar - Planlı (gri)
return 'w-12 h-12 bg-gray-300 border-4 border-dashed border-gray-400 shadow-lg opacity-60';
};
const getTextStyle = (index: number, station: MetroStation) => {
const selectedIndex = selectedStationId
? stations.findIndex(s => s.id === selectedStationId)
: -1;
// Animasyonda şu an bulunulan istasyon
if (index === currentStationIndex) {
return 'text-[#F59E0B] font-bold';
}
if (station.status === 'completed' || index < currentStationIndex) {
// Seçili istasyondan ÖNCE olanlar - Tamamlandı
if (selectedIndex !== -1 && index < selectedIndex) {
return 'text-green-600 font-bold';
}
if (station.status === 'in-progress') {
// Seçili istasyon - İnşaat aşamasında
if (index === selectedIndex) {
return 'text-blue-600 font-bold';
}
// Seçili istasyondan SONRA olanlar - Planlı
return 'text-gray-500 font-semibold';
};
@@ -103,28 +126,36 @@ export default function MetroLine() {
{/* Duraklar Grid - Desktop */}
<div className="grid grid-cols-4 lg:grid-cols-8 gap-6 relative">
{stations.map((station, index) => (
<div key={station.id} className="flex flex-col items-center">
<div className={`relative z-10 rounded-full flex items-center justify-center mb-3 transition-all duration-500 ${getStationStyle(index, station)}`}>
{index === currentStationIndex ? (
<>
{/* Metro simgesi - animasyonlu */}
<svg className="w-8 h-8 text-white" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 2c-4 0-8 .5-8 4v9.5C4 17.43 5.57 19 7.5 19L6 20.5v.5h2l2-2h4l2 2h2v-.5L16.5 19c1.93 0 3.5-1.57 3.5-3.5V6c0-3.5-4-4-8-4zM7.5 17c-.83 0-1.5-.67-1.5-1.5S6.67 14 7.5 14s1.5.67 1.5 1.5S8.33 17 7.5 17zm3.5-6H6V6h5v5zm5.5 6c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm1.5-6h-5V6h5v5z"/>
{stations.map((station, index) => {
const selectedIndex = selectedStationId
? stations.findIndex(s => s.id === selectedStationId)
: -1;
return (
<div key={station.id} className="flex flex-col items-center">
<div className={`relative z-10 rounded-full flex items-center justify-center mb-3 transition-all duration-500 ${getStationStyle(index, station)}`}>
{index === currentStationIndex ? (
<>
{/* Metro simgesi - animasyonlu */}
<svg className="w-8 h-8 text-white" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 2c-4 0-8 .5-8 4v9.5C4 17.43 5.57 19 7.5 19L6 20.5v.5h2l2-2h4l2 2h2v-.5L16.5 19c1.93 0 3.5-1.57 3.5-3.5V6c0-3.5-4-4-8-4zM7.5 17c-.83 0-1.5-.67-1.5-1.5S6.67 14 7.5 14s1.5.67 1.5 1.5S8.33 17 7.5 17zm3.5-6H6V6h5v5zm5.5 6c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm1.5-6h-5V6h5v5z"/>
</svg>
{/* Pulse efekti */}
<div className="absolute inset-0 rounded-full bg-[#F59E0B] animate-ping opacity-30"></div>
</>
) : (selectedIndex !== -1 && index < selectedIndex) ? (
// Tamamlandı - Yeşil check
<svg className="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24">
<path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/>
</svg>
{/* Pulse efekti */}
<div className="absolute inset-0 rounded-full bg-[#F59E0B] animate-ping opacity-30"></div>
</>
) : station.status === 'completed' || index < currentStationIndex ? (
<svg className="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24">
<path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/>
</svg>
) : station.status === 'in-progress' ? (
<svg className="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 2c-4 0-8 .5-8 4v9.5C4 17.43 5.57 19 7.5 19L6 20.5v.5h2l2-2h4l2 2h2v-.5L16.5 19c1.93 0 3.5-1.57 3.5-3.5V6c0-3.5-4-4-8-4z"/>
</svg>
) : (
<svg className="w-5 h-5 text-gray-500" fill="currentColor" viewBox="0 0 24 24">
) : (index === selectedIndex) ? (
// Seçili istasyon - İnşaat aşamasında
<svg className="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 2c-4 0-8 .5-8 4v9.5C4 17.43 5.57 19 7.5 19L6 20.5v.5h2l2-2h4l2 2h2v-.5L16.5 19c1.93 0 3.5-1.57 3.5-3.5V6c0-3.5-4-4-8-4z"/>
</svg>
) : (
// Planlı - Gri saat
<svg className="w-5 h-5 text-gray-500" fill="currentColor" viewBox="0 0 24 24">
<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
</svg>
)}
@@ -134,44 +165,50 @@ export default function MetroLine() {
</span>
<span className={`text-xs transition-all duration-300 ${
index === currentStationIndex ? 'text-[#F59E0B] font-semibold' :
station.status === 'completed' || index < currentStationIndex ? 'text-green-600' :
station.status === 'in-progress' ? 'text-blue-600' : 'text-gray-400'
(selectedIndex !== -1 && index < selectedIndex) ? 'text-green-600' :
(index === selectedIndex) ? 'text-blue-600' : 'text-gray-400'
}`}>
{index === currentStationIndex ? '🚇 Metro Burada' :
station.status === 'completed' || index < currentStationIndex ? '✓ Tamamlandı' :
station.status === 'in-progress' ? '🔄 Devam Ediyor' :
(selectedIndex !== -1 && index < selectedIndex) ? '✓ Tamamlandı' :
(index === selectedIndex) ? '🔄 Devam Ediyor' :
'◯ Planlı'}
</span>
</div>
))}
);
})}
</div>
</div>
{/* Metro Hat - Mobil (Dikey Liste) */}
<div className="md:hidden space-y-3">
{stations.map((station, index) => (
<div key={station.id} className={`flex items-center space-x-3 p-3 rounded-lg transition-all duration-500 ${
{stations.map((station, index) => {
const selectedIndex = selectedStationId
? stations.findIndex(s => s.id === selectedStationId)
: -1;
return (
<div key={station.id} className={`flex items-center space-x-3 p-3 rounded-lg transition-all duration-500 ${
index === currentStationIndex ? 'bg-[#F59E0B]/10 border-2 border-[#F59E0B]' :
station.status === 'completed' || index < currentStationIndex ? 'bg-green-50 border border-green-200' :
station.status === 'in-progress' ? 'bg-blue-50 border border-blue-200' :
(selectedIndex !== -1 && index < selectedIndex) ? 'bg-green-50 border border-green-200' :
(index === selectedIndex) ? 'bg-blue-50 border border-blue-200' :
'bg-gray-50 border border-gray-200'
}`}>
{/* İkon */}
<div className={`rounded-full flex items-center justify-center transition-all duration-500 shrink-0 ${
index === currentStationIndex ? 'w-12 h-12 bg-[#F59E0B]' :
station.status === 'completed' || index < currentStationIndex ? 'w-10 h-10 bg-green-500' :
station.status === 'in-progress' ? 'w-10 h-10 bg-blue-500' :
(selectedIndex !== -1 && index < selectedIndex) ? 'w-10 h-10 bg-green-500' :
(index === selectedIndex) ? 'w-10 h-10 bg-blue-500' :
'w-10 h-10 bg-gray-300'
}`}>
{index === currentStationIndex ? (
<svg className="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 2c-4 0-8 .5-8 4v9.5C4 17.43 5.57 19 7.5 19L6 20.5v.5h2l2-2h4l2 2h2v-.5L16.5 19c1.93 0 3.5-1.57 3.5-3.5V6c0-3.5-4-4-8-4zM7.5 17c-.83 0-1.5-.67-1.5-1.5S6.67 14 7.5 14s1.5.67 1.5 1.5S8.33 17 7.5 17zm3.5-6H6V6h5v5zm5.5 6c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm1.5-6h-5V6h5v5z"/>
</svg>
) : station.status === 'completed' || index < currentStationIndex ? (
) : (selectedIndex !== -1 && index < selectedIndex) ? (
<svg className="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 24 24">
<path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/>
</svg>
) : station.status === 'in-progress' ? (
) : (index === selectedIndex) ? (
<svg className="w-4 h-4 text-white" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 2c-4 0-8 .5-8 4v9.5C4 17.43 5.57 19 7.5 19L6 20.5v.5h2l2-2h4l2 2h2v-.5L16.5 19c1.93 0 3.5-1.57 3.5-3.5V6c0-3.5-4-4-8-4z"/>
</svg>
@@ -186,21 +223,21 @@ export default function MetroLine() {
<div className="flex-1">
<h4 className={`font-bold text-sm ${
index === currentStationIndex ? 'text-[#F59E0B]' :
station.status === 'completed' || index < currentStationIndex ? 'text-green-700' :
station.status === 'in-progress' ? 'text-blue-700' :
(selectedIndex !== -1 && index < selectedIndex) ? 'text-green-700' :
(index === selectedIndex) ? 'text-blue-700' :
'text-gray-600'
}`}>
{station.name}
</h4>
<p className={`text-xs ${
index === currentStationIndex ? 'text-[#F59E0B]' :
station.status === 'completed' || index < currentStationIndex ? 'text-green-600' :
station.status === 'in-progress' ? 'text-blue-600' :
(selectedIndex !== -1 && index < selectedIndex) ? 'text-green-600' :
(index === selectedIndex) ? 'text-blue-600' :
'text-gray-500'
}`}>
{index === currentStationIndex ? '🚇 Metro Burada' :
station.status === 'completed' || index < currentStationIndex ? '✓ Tamamlandı' :
station.status === 'in-progress' ? '🔄 Devam Ediyor' :
(selectedIndex !== -1 && index < selectedIndex) ? '✓ Tamamlandı' :
(index === selectedIndex) ? '🔄 Devam Ediyor' :
'◯ Planlı'}
</p>
</div>
@@ -214,7 +251,8 @@ export default function MetroLine() {
}`} style={{ top: '100%', marginLeft: '-1px' }}></div>
)}
</div>
))}
);
})}
</div>
{/* Alt Bilgi */}