96 lines
3.7 KiB
TypeScript
96 lines
3.7 KiB
TypeScript
"use client";
|
|
|
|
import React, { useState } from 'react';
|
|
import Image from 'next/image';
|
|
import Link from 'next/link';
|
|
import { projectsData, Project } from '@/content/projects';
|
|
import { cn } from '@/lib/utils';
|
|
import { MapPin, ArrowRight } from 'lucide-react';
|
|
|
|
type Category = 'wszystkie' | Project['category'];
|
|
|
|
const categories: { id: Category; label: string }[] = [
|
|
{ id: 'wszystkie', label: 'Wszystkie' },
|
|
{ id: 'klimatyzacja', label: 'Klimatyzacja' },
|
|
{ id: 'pompy-ciepla', label: 'Pompy ciepła' },
|
|
];
|
|
|
|
export function ProjectsGrid() {
|
|
const [activeCategory, setActiveCategory] = useState<Category>('wszystkie');
|
|
|
|
const filteredProjects = projectsData.filter(
|
|
(project) => activeCategory === 'wszystkie' || project.category === activeCategory
|
|
);
|
|
|
|
return (
|
|
<section className="py-16 md:py-24 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
{/* Filtry */}
|
|
<div className="flex flex-wrap items-center justify-center gap-3 mb-12">
|
|
{categories.map((category) => (
|
|
<button
|
|
key={category.id}
|
|
onClick={() => setActiveCategory(category.id)}
|
|
className={cn(
|
|
"px-5 py-2.5 rounded-full text-sm font-semibold transition-all duration-300 border",
|
|
activeCategory === category.id
|
|
? "bg-primary text-white border-primary shadow-md"
|
|
: "bg-white text-text-muted border-border hover:border-primary/30 hover:text-primary"
|
|
)}
|
|
>
|
|
{category.label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
{/* Siatka */}
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
|
{filteredProjects.map((project) => (
|
|
<div
|
|
key={project.id}
|
|
className="group relative rounded-2xl overflow-hidden bg-slate-100 aspect-[4/3]"
|
|
>
|
|
<Image
|
|
src={project.imageUrl}
|
|
alt={project.title}
|
|
fill
|
|
className="object-cover transition-transform duration-700 group-hover:scale-105"
|
|
/>
|
|
|
|
{/* Nakładka gradientowa */}
|
|
<div className="absolute inset-0 bg-gradient-to-t from-primary/90 via-primary/40 to-transparent opacity-80 group-hover:opacity-90 transition-opacity duration-300" />
|
|
|
|
{/* Treść (Zawsze widoczna lokalizacja i kategoria, pojawiający się opis) */}
|
|
<div className="absolute inset-0 p-6 flex flex-col justify-end">
|
|
<div className="transform translate-y-4 group-hover:translate-y-0 transition-transform duration-300">
|
|
<div className="flex items-center gap-3 mb-3">
|
|
<span className="px-3 py-1 bg-accent text-white text-xs font-bold rounded-full uppercase tracking-wider">
|
|
{categories.find(c => c.id === project.category)?.label}
|
|
</span>
|
|
<div className="flex items-center gap-1 text-white/80 text-sm font-medium">
|
|
<MapPin className="w-3.5 h-3.5" />
|
|
<span>{project.location}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<h3 className="text-xl font-bold text-white mb-2 font-heading">
|
|
{project.title}
|
|
</h3>
|
|
|
|
<p className="text-white/80 text-sm line-clamp-2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 delay-100">
|
|
{project.description}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{filteredProjects.length === 0 && (
|
|
<div className="text-center py-20 text-text-muted">
|
|
<p className="text-lg">Brak realizacji w tej kategorii.</p>
|
|
</div>
|
|
)}
|
|
</section>
|
|
);
|
|
}
|