generated from autoblog/Seo
82 lines
3 KiB
TypeScript
82 lines
3 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-20 border-b border-slate-100">
|
||
|
|
<div className="mx-auto max-w-7xl px-4">
|
||
|
|
<div className="flex items-center gap-3 text-blue-600 font-bold uppercase tracking-[0.2em] text-[10px] mb-6">
|
||
|
|
<div className="h-[1px] w-6 bg-blue-600" />
|
||
|
|
<span>Arquivo Editorial</span>
|
||
|
|
</div>
|
||
|
|
<h1 className="text-6xl font-serif font-bold text-slate-950 tracking-tighter">{categoryName}</h1>
|
||
|
|
<p className="text-xl text-slate-500 mt-6 max-w-2xl leading-relaxed">{categoryDescription}</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="py-24 bg-[#FCFCFC]">
|
||
|
|
<div className="mx-auto max-w-7xl px-4">
|
||
|
|
{filteredArticles.length > 0 ? (
|
||
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-x-8 gap-y-20">
|
||
|
|
{filteredArticles.map(article => (
|
||
|
|
<ArticleCard key={article.id} article={article} />
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
) : (
|
||
|
|
<div className="text-center py-20">
|
||
|
|
<h2 className="text-2xl font-bold text-gray-400">Nenhum artigo encontrado nesta categoria.</h2>
|
||
|
|
<Link to="/" className="text-blue-600 font-bold mt-4 inline-block hover:underline">Voltar para a Home</Link>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
}
|