104 lines
3.9 KiB
TypeScript
104 lines
3.9 KiB
TypeScript
'use client';
|
|
|
|
import { useState } from 'react';
|
|
import Image from "next/image";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
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 filteredItems = activeCategory === "Hepsi"
|
|
? items
|
|
: items.filter(item => item.category === activeCategory);
|
|
|
|
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
|
|
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 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>
|
|
</>
|
|
);
|
|
}
|