fix: implement fleet filtering logic on fleet page

components/FleetList.tsx

@@ -0,0 +1,103 @@
+'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>
+    </>
+  );
+}