"use client"; import { useState } from "react"; import { motion, AnimatePresence } from "framer-motion"; import Image from "next/image"; import Link from "next/link"; import { ExternalLink, Filter, ArrowRight, Layers } from "lucide-react"; import { stripHtml, getDirectDriveLink } from "@/lib/text"; export default function ProjectGrid({ initialProjects, categories }: { initialProjects: any[], categories: string[] }) { const [filter, setFilter] = useState("Tous"); const [currentPage, setCurrentPage] = useState(1); const itemsPerPage = 6; const filtered = filter === "Tous" ? initialProjects : initialProjects.filter(p => p.category?.name === filter); // Pagination logic const totalPages = Math.ceil(filtered.length / itemsPerPage); const startIndex = (currentPage - 1) * itemsPerPage; const paginatedProjects = filtered.slice(startIndex, startIndex + itemsPerPage); // Reset page when filter changes const handleFilterChange = (newFilter: string) => { setFilter(newFilter); setCurrentPage(1); }; return ( <> {/* Filters Section */}
Filtrer les réalisations
{categories.map(cat => ( ))}
{/* Empty State */} {filtered.length === 0 && (

Aucun projet trouvé

Essayez une autre catégorie ou revenez plus tard.

)} {/* Grid display with animation */} {paginatedProjects.map((project, i) => ( {/* Enhanced Image Container */}
{project.title}
{project.category?.name || "Ingénierie"}
{project.status === "En cours" && (
EN COURS
)}
{/* Card Content with better typography */}

{project.title}

{stripHtml(project.description).slice(0, 150)}...

{project.technologies.slice(0, 4).map((t: string) => ( {t} ))}
DÉTAILS DU PROJET
))} {/* Pagination Controls */} {totalPages > 1 && (
{Array.from({ length: totalPages }, (_, i) => ( ))}
)} ); }