mmintel/klz-cables.com
1
0
Fork 0
Code Issues Pull Requests 3 Actions Packages Projects Releases 1 Wiki Activity

fix(blog): make category filter badges functional and preserve filter in pagination

Browse Source
This commit is contained in:
Marc Mintel
2026-06-20 09:32:42 +02:00
parent 5a82243965
commit 4f64a94a15
1 changed files with 47 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
app/[locale]/blog/page.tsx
View File

@@ -12,6 +12,7 @@ interface BlogIndexProps {
params: Promise<{ params: Promise<{
locale: string; locale: string;
}>; }>;
searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
} }
export async function generateMetadata({ params }: BlogIndexProps) { export async function generateMetadata({ params }: BlogIndexProps) {
@@ -41,8 +42,10 @@ export async function generateMetadata({ params }: BlogIndexProps) {
}; };
} }
export default async function BlogIndex({ params }: BlogIndexProps) { export default async function BlogIndex({ params, searchParams }: BlogIndexProps) {
const { locale } = await params; const { locale } = await params;
const resolvedSearchParams = await searchParams;
const categoryParam = resolvedSearchParams.category as string | undefined;
setRequestLocale(locale); setRequestLocale(locale);
const t = await getTranslations('Blog'); const t = await getTranslations('Blog');
const posts = await getAllPosts(locale); const posts = await getAllPosts(locale);
@@ -52,8 +55,14 @@ export default async function BlogIndex({ params }: BlogIndexProps) {
(a, b) => new Date(b.frontmatter.date).getTime() - new Date(a.frontmatter.date).getTime(), (a, b) => new Date(b.frontmatter.date).getTime() - new Date(a.frontmatter.date).getTime(),
); );
const featuredPost = sortedPosts[0]; const filteredPosts = categoryParam
const remainingPosts = sortedPosts.slice(1); ? sortedPosts.filter(
(post) => post.frontmatter.category?.toLowerCase() === categoryParam.toLowerCase(),
)
: sortedPosts;
const featuredPost = filteredPosts[0];
const remainingPosts = filteredPosts.slice(1);
return ( return (
<div className="bg-neutral-light min-h-screen"> <div className="bg-neutral-light min-h-screen">
@@ -123,31 +132,38 @@ export default async function BlogIndex({ params }: BlogIndexProps) {
{t('allArticles')} {t('allArticles')}
</Heading> </Heading>
<div className="flex flex-wrap gap-2 md:gap-4"> <div className="flex flex-wrap gap-2 md:gap-4">
{/* Category filters could go here */} <Link href={`/${locale}/blog`}>
<Badge <Badge
variant="primary" variant={!categoryParam ? 'primary' : 'neutral'}
className="cursor-pointer hover:bg-primary hover:text-white transition-colors touch-target px-3 md:px-4" className="cursor-pointer hover:bg-primary hover:text-white transition-colors touch-target px-3 md:px-4"
> >
{t('categories.all')} {t('categories.all')}
</Badge> </Badge>
<Badge </Link>
variant="neutral" <Link href={`/${locale}/blog?category=industry`}>
className="cursor-pointer hover:bg-primary hover:text-white transition-colors touch-target px-3 md:px-4" <Badge
> variant={categoryParam === 'industry' ? 'primary' : 'neutral'}
{t('categories.industry')} className="cursor-pointer hover:bg-primary hover:text-white transition-colors touch-target px-3 md:px-4"
</Badge> >
<Badge {t('categories.industry')}
variant="neutral" </Badge>
className="cursor-pointer hover:bg-primary hover:text-white transition-colors touch-target px-3 md:px-4" </Link>
> <Link href={`/${locale}/blog?category=technical`}>
{t('categories.technical')} <Badge
</Badge> variant={categoryParam === 'technical' ? 'primary' : 'neutral'}
<Badge className="cursor-pointer hover:bg-primary hover:text-white transition-colors touch-target px-3 md:px-4"
variant="neutral" >
className="cursor-pointer hover:bg-primary hover:text-white transition-colors touch-target px-3 md:px-4" {t('categories.technical')}
> </Badge>
{t('categories.sustainability')} </Link>
</Badge> <Link href={`/${locale}/blog?category=sustainability`}>
<Badge
variant={categoryParam === 'sustainability' ? 'primary' : 'neutral'}
className="cursor-pointer hover:bg-primary hover:text-white transition-colors touch-target px-3 md:px-4"
>
{t('categories.sustainability')}
</Badge>
</Link>
</div> </div>
</div> </div>
</Reveal> </Reveal>
@@ -260,7 +276,7 @@ export default async function BlogIndex({ params }: BlogIndexProps) {
{t('prev')} {t('prev')}
</Button> </Button>
<Button <Button
href={`/${locale}/blog?page=1`} href={`/${locale}/blog?page=1${categoryParam ? `&category=${categoryParam}` : ''}`}
variant="primary" variant="primary"
size="sm" size="sm"
className="md:h-11 md:px-6 md:text-base" className="md:h-11 md:px-6 md:text-base"
@@ -269,7 +285,7 @@ export default async function BlogIndex({ params }: BlogIndexProps) {
1 1
</Button> </Button>
<Button <Button
href={`/${locale}/blog?page=2`} href={`/${locale}/blog?page=2${categoryParam ? `&category=${categoryParam}` : ''}`}
variant="outline" variant="outline"
size="sm" size="sm"
className="md:h-11 md:px-6 md:text-base" className="md:h-11 md:px-6 md:text-base"
@@ -277,7 +293,7 @@ export default async function BlogIndex({ params }: BlogIndexProps) {
2 2
</Button> </Button>
<Button <Button
href={`/${locale}/blog?page=2`} href={`/${locale}/blog?page=2${categoryParam ? `&category=${categoryParam}` : ''}`}
variant="outline" variant="outline"
size="sm" size="sm"
className="md:h-11 md:px-6 md:text-base" className="md:h-11 md:px-6 md:text-base"