generated from autoblog/Seo
84 lines
3.2 KiB
TypeScript
84 lines
3.2 KiB
TypeScript
|
import { useParams, Link } from 'react-router-dom';
|
||
|
|
import { articles } from '../data/articles';
|
||
|
|
import ArticleCard from '../components/ArticleCard';
|
||
|
|
import SEO from '../components/SEO';
|
||
|
|
import { ChevronRight } from 'lucide-react';
|
||
|
|
|
||
|
|
import { useLanguage } from '../contexts/LanguageContext';
|
||
|
|
import { CATEGORY_MAP } from '../constants';
|
||
|
|
|
||
|
|
export default function CategoryPage() {
|
||
|
|
const { categorySlug } = useParams();
|
||
|
|
const { lang } = useLanguage();
|
||
|
|
|
||
|
|
const getCategoryData = (slug: string) => {
|
||
|
|
const entry = Object.entries(CATEGORY_MAP).find(([_, value]) => value.slug === slug);
|
||
|
|
|
||
|
|
if (entry) {
|
||
|
|
const [originalName, data] = entry;
|
||
|
|
return {
|
||
|
|
name: data.name,
|
||
|
|
originalName: originalName,
|
||
|
|
description: `Deep dives, case studies and tactical analysis on ${data.name.toLowerCase()}.`
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
return {
|
||
|
|
name: slug.charAt(0).toUpperCase() + slug.slice(1).replace(/-/g, ' '),
|
||
|
|
originalName: slug,
|
||
|
|
description: 'Artigos e análises sobre o ecossistema digital.'
|
||
|
|
};
|
||
|
|
};
|
||
|
|
|
||
|
|
const { name: categoryName, originalName, description: categoryDescription } = getCategoryData(categorySlug || '');
|
||
|
|
|
||
|
|
const filteredArticles = articles.filter(a => {
|
||
|
|
// If we have a map entry, match by original category name
|
||
|
|
if (originalName) {
|
||
|
|
return a.category === originalName;
|
||
|
|
}
|
||
|
|
// Fallback strategy
|
||
|
|
const slugfiedCategory = a.category.toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "").replace(/\s+/g, '-');
|
||
|
|
return slugfiedCategory === categorySlug;
|
||
|
|
});
|
||
|
|
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<SEO
|
||
|
|
title={`Artigos sobre ${categoryName}`}
|
||
|
|
description={`Confira guias e dicas exclusivas sobre ${categoryName} em nosso blog de autoridade SEO.`}
|
||
|
|
/>
|
||
|
|
|
||
|
|
<div className="bg-white py-24 border-b border-slate-100">
|
||
|
|
<div className="mx-auto max-w-7xl px-6">
|
||
|
|
<div className="flex items-center gap-4 text-brand font-black uppercase tracking-[0.3em] text-[10px] mb-8">
|
||
|
|
<div className="h-[1px] w-12 bg-brand" />
|
||
|
|
<span>Arquivo Editorial</span>
|
||
|
|
</div>
|
||
|
|
<h1 className="text-6xl sm:text-8xl font-display font-black text-slate-950 tracking-[-0.04em] leading-[0.9]">{categoryName}</h1>
|
||
|
|
<p className="text-xl text-slate-500 mt-8 max-w-2xl font-medium leading-relaxed border-l-2 border-slate-100 pl-6">{categoryDescription}</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="py-24 bg-white">
|
||
|
|
<div className="mx-auto max-w-7xl px-6">
|
||
|
|
{filteredArticles.length > 0 ? (
|
||
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-x-12 gap-y-20">
|
||
|
|
{filteredArticles.map(article => (
|
||
|
|
<ArticleCard key={article.id} article={article} />
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
) : (
|
||
|
|
<div className="text-center py-32 bg-slate-50 rounded-[3rem] border border-slate-100">
|
||
|
|
<h2 className="text-xl font-display font-black text-slate-300 uppercase tracking-widest mb-6">Nenhum insight encontrado</h2>
|
||
|
|
<Link to="/" className="btn-primary inline-flex items-center gap-3">
|
||
|
|
Voltar para a Home
|
||
|
|
</Link>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
}
|