171 lines
7.4 KiB
TypeScript
171 lines
7.4 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useMemo, useState } from "react";
|
|
import Link from "next/link";
|
|
import { useLocale } from "@/contexts/LocaleContext";
|
|
|
|
interface Project {
|
|
id: string;
|
|
title: string;
|
|
category: string;
|
|
description: string | null;
|
|
coverImage: string | null;
|
|
galleryImages: string[];
|
|
status: string;
|
|
client: string | null;
|
|
completionDate: string | null;
|
|
}
|
|
|
|
const FALLBACK_IMAGE = "https://images.unsplash.com/photo-1616401784845-180882ba9ba8?q=80&w=2070&auto=format&fit=crop";
|
|
|
|
export default function ProjetosPage() {
|
|
const { t, locale } = useLocale();
|
|
const prefix = locale === 'pt' ? '' : `/${locale}`;
|
|
const [projects, setProjects] = useState<Project[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [selectedCategory, setSelectedCategory] = useState<string>('todos');
|
|
|
|
useEffect(() => {
|
|
let isMounted = true;
|
|
const controller = new AbortController();
|
|
|
|
const fetchProjects = async () => {
|
|
try {
|
|
const response = await fetch('/api/projects?status=published', {
|
|
method: 'GET',
|
|
cache: 'no-store',
|
|
credentials: 'same-origin',
|
|
signal: controller.signal,
|
|
});
|
|
|
|
if (!response.ok) {
|
|
throw new Error(`Falha ao buscar projetos (status ${response.status})`);
|
|
}
|
|
|
|
const data = await response.json();
|
|
|
|
if (isMounted && Array.isArray(data)) {
|
|
setProjects(data);
|
|
}
|
|
} catch (err) {
|
|
if ((err as Error).name !== 'AbortError') {
|
|
console.error('Erro ao carregar projetos:', err);
|
|
}
|
|
} finally {
|
|
if (isMounted) {
|
|
setLoading(false);
|
|
}
|
|
}
|
|
};
|
|
|
|
fetchProjects();
|
|
|
|
return () => {
|
|
isMounted = false;
|
|
controller.abort();
|
|
};
|
|
}, []);
|
|
|
|
const categories = useMemo(() => {
|
|
const unique = new Set<string>();
|
|
projects.forEach((project) => {
|
|
if (project.category) {
|
|
unique.add(project.category);
|
|
}
|
|
});
|
|
return Array.from(unique);
|
|
}, [projects]);
|
|
|
|
const filteredProjects = useMemo(() => {
|
|
if (selectedCategory === 'todos') {
|
|
return projects;
|
|
}
|
|
return projects.filter((project) => project.category === selectedCategory);
|
|
}, [projects, selectedCategory]);
|
|
|
|
return (
|
|
<main className="bg-white dark:bg-secondary transition-colors duration-300">
|
|
{/* Hero Section */}
|
|
<section className="relative h-[400px] flex items-center bg-secondary text-white overflow-hidden">
|
|
<div className="absolute inset-0 bg-black/60 z-10"></div>
|
|
<div className="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1504307651254-35680f356dfd?q=80&w=2070&auto=format&fit=crop')] bg-cover bg-center"></div>
|
|
<div className="container mx-auto px-4 relative z-20">
|
|
<h1 className="text-5xl font-bold font-headline mb-4">{t('projects.hero.title')}</h1>
|
|
<p className="text-xl text-gray-300 max-w-2xl">
|
|
{t('projects.hero.subtitle')}
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Projects Grid */}
|
|
<section className="py-20 bg-white dark:bg-secondary">
|
|
<div className="container mx-auto px-4">
|
|
{/* Filters */}
|
|
<div className="flex flex-wrap gap-4 mb-12 justify-center">
|
|
<button
|
|
onClick={() => setSelectedCategory('todos')}
|
|
className={`px-6 py-2 rounded-full font-bold transition-colors ${selectedCategory === 'todos' ? 'bg-primary text-white shadow-md' : 'bg-gray-100 dark:bg-white/10 text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-white/20'}`}
|
|
>
|
|
{t('projects.filters.all')}
|
|
</button>
|
|
{categories.map((category) => (
|
|
<button
|
|
key={category}
|
|
onClick={() => setSelectedCategory(category)}
|
|
className={`px-6 py-2 rounded-full font-bold transition-colors ${selectedCategory === category ? 'bg-primary text-white shadow-md' : 'bg-gray-100 dark:bg-white/10 text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-white/20'}`}
|
|
>
|
|
{category}
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
{loading ? (
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
|
{Array.from({ length: 6 }).map((_, index) => (
|
|
<div key={index} className="animate-pulse bg-white dark:bg-secondary rounded-xl border border-gray-100 dark:border-white/10 h-96"></div>
|
|
))}
|
|
</div>
|
|
) : filteredProjects.length === 0 ? (
|
|
<div className="text-center text-gray-500 dark:text-gray-400 py-16">
|
|
<i className="ri-briefcase-line text-5xl mb-4"></i>
|
|
<p>{locale === 'pt' ? 'Ainda não temos projetos publicados nesta categoria.' : locale === 'es' ? 'Todavía no hay proyectos publicados en esta categoría.' : 'No projects published in this category yet.'}</p>
|
|
</div>
|
|
) : (
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
|
{filteredProjects.map((project) => {
|
|
const image = project.coverImage || project.galleryImages[0] || FALLBACK_IMAGE;
|
|
const description = project.description || (locale === 'pt' ? 'Descrição disponível em breve.' : locale === 'es' ? 'Descripción disponible pronto.' : 'Description coming soon.');
|
|
|
|
return (
|
|
<div key={project.id} className="group bg-white dark:bg-secondary rounded-xl overflow-hidden shadow-sm hover:shadow-xl transition-all duration-300 border border-gray-100 dark:border-white/10 flex flex-col">
|
|
<div className="relative h-64 overflow-hidden">
|
|
<div className="absolute inset-0 bg-cover bg-center transition-transform duration-700 group-hover:scale-110" style={{ backgroundImage: `url('${image}')` }}></div>
|
|
<div className="absolute inset-0 bg-black/20 group-hover:bg-black/0 transition-colors"></div>
|
|
<div className="absolute top-4 left-4 bg-white/90 backdrop-blur-sm px-3 py-1 rounded-md text-xs font-bold text-secondary uppercase tracking-wider">
|
|
{project.category || t('projects.filters.all')}
|
|
</div>
|
|
</div>
|
|
<div className="p-6 grow flex flex-col">
|
|
<h3 className="text-xl font-bold font-headline text-secondary dark:text-white mb-2 group-hover:text-primary transition-colors">{project.title}</h3>
|
|
<div className="flex items-center gap-2 text-gray-500 dark:text-gray-400 text-sm mb-4">
|
|
<i className="ri-roadster-line"></i>
|
|
<span>{project.client || (locale === 'pt' ? 'Cliente confidencial' : locale === 'es' ? 'Cliente confidencial' : 'Confidential client')}</span>
|
|
</div>
|
|
<p className="text-gray-600 dark:text-gray-400 text-sm mb-6 line-clamp-3 grow">
|
|
{description}
|
|
</p>
|
|
<Link href={`${prefix}/projetos/${project.id}`} className="inline-flex items-center gap-2 text-primary font-bold hover:gap-3 transition-all mt-auto">
|
|
{t('projects.viewDetails')} <i className="ri-arrow-right-line"></i>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</section>
|
|
</main>
|
|
);
|
|
}
|