From 4f64a94a15e958e3aef809ad96589f5b685d7839 Mon Sep 17 00:00:00 2001
From: Marc Mintel <marc@mintel.me>
Date: Sat, 20 Jun 2026 09:32:42 +0200
Subject: [PATCH] fix(blog): make category filter badges functional and
 preserve filter in pagination

---
 app/[locale]/blog/page.tsx | 78 +++++++++++++++++++++++---------------
 1 file changed, 47 insertions(+), 31 deletions(-)

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