196 lines
8.6 KiB
TypeScript
196 lines
8.6 KiB
TypeScript
'use client';
|
||
|
||
import { useState } from 'react';
|
||
import Image from "next/image";
|
||
import { cn } from "@/lib/utils";
|
||
import { motion, AnimatePresence } from "framer-motion";
|
||
import { X, Phone, MessageCircle } from "lucide-react";
|
||
import { siteConfig } from "@/lib/data";
|
||
|
||
interface FleetItem {
|
||
name: string;
|
||
description: string;
|
||
capacity: string;
|
||
reach: string;
|
||
image: string;
|
||
status: string;
|
||
category: string;
|
||
}
|
||
|
||
interface FleetListProps {
|
||
items: FleetItem[];
|
||
categories: string[];
|
||
}
|
||
|
||
export function FleetList({ items, categories }: FleetListProps) {
|
||
const [activeCategory, setActiveCategory] = useState("Hepsi");
|
||
const [selectedItem, setSelectedItem] = useState<FleetItem | null>(null);
|
||
|
||
const filteredItems = activeCategory === "Hepsi"
|
||
? items
|
||
: items.filter(item => item.category === activeCategory);
|
||
|
||
const handleWhatsApp = (itemName: string) => {
|
||
const message = encodeURIComponent(`Merhaba, ${itemName} hakkında bilgi almak istiyorum.`);
|
||
window.open(`https://wa.me/${siteConfig.contact.whatsapp}?text=${message}`, '_blank');
|
||
};
|
||
|
||
return (
|
||
<>
|
||
{/* Filter System */}
|
||
<section className="bg-surface-container border-y border-outline-variant/10">
|
||
<div className="max-w-7xl mx-auto px-8 py-6">
|
||
<div className="flex flex-wrap items-center gap-4">
|
||
<span className="text-on-surface-variant font-headline text-xs uppercase tracking-widest mr-4">Filtrele:</span>
|
||
{categories.map((category) => (
|
||
<button
|
||
key={category}
|
||
onClick={() => setActiveCategory(category)}
|
||
className={cn(
|
||
"px-5 py-2 text-xs font-bold uppercase tracking-wider transition-all",
|
||
activeCategory === category
|
||
? "bg-primary text-on-primary"
|
||
: "bg-surface-container-highest text-on-surface-variant hover:text-primary"
|
||
)}
|
||
>
|
||
{category}
|
||
</button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Fleet Grid */}
|
||
<section className="max-w-7xl mx-auto px-8 py-20">
|
||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-px bg-outline-variant/10">
|
||
{filteredItems.map((item, index) => (
|
||
<div
|
||
key={index}
|
||
className="group relative bg-surface-container-low border border-outline-variant/10 overflow-hidden flex flex-col"
|
||
>
|
||
<div className="aspect-[4/3] overflow-hidden relative">
|
||
<Image
|
||
src={item.image}
|
||
alt={item.name}
|
||
fill
|
||
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
|
||
className="object-cover transition-transform duration-700 group-hover:scale-110"
|
||
/>
|
||
<div className={cn(
|
||
"absolute top-4 left-4 px-3 py-1 text-[10px] font-black uppercase tracking-tighter",
|
||
item.status === "Müsait" ? "bg-primary text-on-primary" : "bg-error text-on-error"
|
||
)}>
|
||
{item.status}
|
||
</div>
|
||
</div>
|
||
<div className="p-8 flex-1 flex flex-col">
|
||
<h3 className="text-2xl font-black text-on-surface uppercase tracking-tight mb-2">
|
||
{item.name}
|
||
</h3>
|
||
<p className="text-on-surface-variant text-sm mb-6 font-light">
|
||
{item.description}
|
||
</p>
|
||
<div className="grid grid-cols-2 gap-4 border-t border-outline-variant/10 pt-6 mt-auto">
|
||
<div>
|
||
<span className="block text-primary text-[10px] uppercase tracking-widest mb-1">Kapasite</span>
|
||
<span className="text-on-surface font-headline font-bold text-xl">{item.capacity}</span>
|
||
</div>
|
||
<div>
|
||
<span className="block text-primary text-[10px] uppercase tracking-widest mb-1">Erişim</span>
|
||
<span className="text-on-surface font-headline font-bold text-xl">{item.reach}</span>
|
||
</div>
|
||
</div>
|
||
<button
|
||
onClick={() => setSelectedItem(item)}
|
||
className="mt-8 w-full bg-surface-container-highest text-primary py-4 text-xs font-black uppercase tracking-[0.2em] hover:bg-primary hover:text-on-primary transition-all duration-300"
|
||
>
|
||
İncele
|
||
</button>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</section>
|
||
|
||
{/* Detail Modal */}
|
||
<AnimatePresence>
|
||
{selectedItem && (
|
||
<div className="fixed inset-0 z-[100] flex items-center justify-center p-4 md:p-8">
|
||
<motion.div
|
||
initial={{ opacity: 0 }}
|
||
animate={{ opacity: 1 }}
|
||
exit={{ opacity: 0 }}
|
||
onClick={() => setSelectedItem(null)}
|
||
className="absolute inset-0 bg-background/95 backdrop-blur-sm"
|
||
/>
|
||
<motion.div
|
||
initial={{ opacity: 0, scale: 0.95, y: 20 }}
|
||
animate={{ opacity: 1, scale: 1, y: 0 }}
|
||
exit={{ opacity: 0, scale: 0.95, y: 20 }}
|
||
className="relative w-full max-w-4xl bg-surface-container-low border border-outline-variant/20 overflow-hidden shadow-2xl"
|
||
>
|
||
<button
|
||
onClick={() => setSelectedItem(null)}
|
||
className="absolute top-6 right-6 z-10 p-2 bg-background/50 hover:bg-primary hover:text-on-primary transition-colors text-white"
|
||
>
|
||
<X className="w-6 h-6" />
|
||
</button>
|
||
|
||
<div className="grid grid-cols-1 lg:grid-cols-2">
|
||
<div className="relative aspect-[4/3] lg:aspect-auto h-full min-h-[300px]">
|
||
<Image
|
||
src={selectedItem.image}
|
||
alt={selectedItem.name}
|
||
fill
|
||
sizes="(max-width: 1024px) 100vw, 50vw"
|
||
className="object-cover"
|
||
/>
|
||
</div>
|
||
<div className="p-8 md:p-12 flex flex-col">
|
||
<span className="text-primary font-headline text-xs font-bold uppercase tracking-[0.3em] mb-4">
|
||
{selectedItem.category}
|
||
</span>
|
||
<h2 className="text-4xl md:text-5xl font-black text-on-surface uppercase tracking-tighter mb-6">
|
||
{selectedItem.name}
|
||
</h2>
|
||
<p className="text-on-surface-variant text-lg leading-relaxed mb-8">
|
||
{selectedItem.description}
|
||
</p>
|
||
|
||
<div className="grid grid-cols-2 gap-px bg-outline-variant/20 mb-12">
|
||
<div className="bg-surface-container-low p-6">
|
||
<span className="block text-primary text-[10px] uppercase tracking-widest mb-1">Kapasite</span>
|
||
<span className="text-on-surface font-headline font-bold text-2xl">{selectedItem.capacity}</span>
|
||
</div>
|
||
<div className="bg-surface-container-low p-6">
|
||
<span className="block text-primary text-[10px] uppercase tracking-widest mb-1">Erişim</span>
|
||
<span className="text-on-surface font-headline font-bold text-2xl">{selectedItem.reach}</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="mt-auto flex flex-col sm:flex-row gap-4">
|
||
<button
|
||
onClick={() => handleWhatsApp(selectedItem.name)}
|
||
className="flex-1 bg-primary text-on-primary px-8 py-5 font-headline font-bold uppercase tracking-widest flex items-center justify-center gap-3 hover:brightness-110 transition-all"
|
||
>
|
||
<MessageCircle className="w-6 h-6" />
|
||
Hemen Teklif Al
|
||
</button>
|
||
<a
|
||
href={`tel:${siteConfig.contact.phone.replace(/\s+/g, '')}`}
|
||
className="flex-1 border border-outline-variant/30 text-white px-8 py-5 font-headline font-bold uppercase tracking-widest flex items-center justify-center gap-3 hover:bg-white/5 transition-all"
|
||
>
|
||
<Phone className="w-5 h-5" />
|
||
Bizi Arayın
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</motion.div>
|
||
</div>
|
||
)}
|
||
</AnimatePresence>
|
||
</>
|
||
);
|
||
}
|