fix: implement fleet filtering logic on fleet page
This commit is contained in:
@@ -4,9 +4,9 @@ import { FloatingWhatsApp } from "@/components/FloatingWhatsApp";
|
|||||||
import { CTASection } from "@/components/CTASection";
|
import { CTASection } from "@/components/CTASection";
|
||||||
import { LoadMeterSection } from "@/components/LoadMeterSection";
|
import { LoadMeterSection } from "@/components/LoadMeterSection";
|
||||||
import Image from "next/image";
|
import Image from "next/image";
|
||||||
import { cn } from "@/lib/utils";
|
|
||||||
import { Metadata } from "next";
|
import { Metadata } from "next";
|
||||||
import { FLEET_ITEMS } from "@/lib/data";
|
import { FLEET_ITEMS } from "@/lib/data";
|
||||||
|
import { FleetList } from "@/components/FleetList";
|
||||||
|
|
||||||
export const metadata: Metadata = {
|
export const metadata: Metadata = {
|
||||||
title: "Geniş Vinç Filosu ve İş Makineleri Parkurumuz",
|
title: "Geniş Vinç Filosu ve İş Makineleri Parkurumuz",
|
||||||
@@ -44,75 +44,7 @@ export default function FleetPage() {
|
|||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
{/* Filter System */}
|
<FleetList items={FLEET_ITEMS} categories={FLEET_CATEGORIES} />
|
||||||
<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>
|
|
||||||
{FLEET_CATEGORIES.map((category, index) => (
|
|
||||||
<button
|
|
||||||
key={index}
|
|
||||||
className={cn(
|
|
||||||
"px-5 py-2 text-xs font-bold uppercase tracking-wider transition-all",
|
|
||||||
index === 0
|
|
||||||
? "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">
|
|
||||||
{FLEET_ITEMS.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>
|
|
||||||
|
|
||||||
<LoadMeterSection />
|
<LoadMeterSection />
|
||||||
<CTASection />
|
<CTASection />
|
||||||
|
|||||||
103
components/FleetList.tsx
Normal file
103
components/FleetList.tsx
Normal file
@@ -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>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user