ayrisdev/aydogannakliyat
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: make fleet inspection buttons functional with details modal and whatsapp integration

Browse Source
This commit is contained in:
ayrisdev
2026-04-12 13:34:17 +03:00
parent 4da0dbd0a6
commit 5e4da41d30
2 changed files with 131 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
components/FleetList.tsx
View File

@@ -3,6 +3,9 @@
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;
@@ -21,11 +24,17 @@ interface FleetListProps {
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 */}
@@ -90,7 +99,10 @@ export function FleetList({ items, categories }: FleetListProps) {
<span className="text-on-surface font-headline font-bold text-xl">{item.reach}</span>
</div>
</div>
<button 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">
<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>
@@ -98,6 +110,84 @@ export function FleetList({ items, categories }: FleetListProps) {
))}
</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
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>
</>
);
}