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

38
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>
</Link>
<Link href={`/${locale}/blog?category=industry`}>
<Badge <Badge
variant="neutral" variant={categoryParam === 'industry' ? '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.industry')} {t('categories.industry')}
</Badge> </Badge>
</Link>
<Link href={`/${locale}/blog?category=technical`}>
<Badge <Badge
variant="neutral" variant={categoryParam === 'technical' ? '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.technical')} {t('categories.technical')}
</Badge> </Badge>
</Link>
<Link href={`/${locale}/blog?category=sustainability`}>
<Badge <Badge
variant="neutral" variant={categoryParam === 'sustainability' ? '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.sustainability')} {t('categories.sustainability')}
</Badge> </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"