auto-claude: subtask-1-3 - Update portfolio page with filtering logic

- Import CategoryFilter component
- Add searchParams to Props type to receive category query param
- Filter projects based on selected category
- Render CategoryFilter component above PortfolioGrid
- Pass filtered projects to PortfolioGrid

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
2026-01-25 06:36:33 +01:00
co-authored by Claude Sonnet 4.5
parent 5115831e81
commit 7ff2cb276e
+14 -3
View File
@@ -1,10 +1,11 @@
import { setRequestLocale } from 'next-intl/server';
import type { Metadata } from 'next';
import { getTranslations } from 'next-intl/server';
import { PortfolioGrid } from '@/components/portfolio';
import { PortfolioGrid, CategoryFilter } from '@/components/portfolio';
type Props = {
params: Promise<{ locale: string }>;
searchParams: Promise<{ category?: string }>;
};
const BASE_URL = process.env.NEXT_PUBLIC_SITE_URL || 'https://damjan-savic.com';
@@ -159,12 +160,20 @@ const projects = [
},
];
export default async function PortfolioPage({ params }: Props) {
export default async function PortfolioPage({ params, searchParams }: Props) {
const { locale } = await params;
setRequestLocale(locale);
const t = await getTranslations('portfolio');
// Get category filter from URL params
const { category } = await searchParams;
// Filter projects by category if specified
const filteredProjects = category
? projects.filter((project) => project.category === category)
: projects;
return (
<div className="relative min-h-screen">
<section className="py-24">
@@ -178,7 +187,9 @@ export default async function PortfolioPage({ params }: Props) {
</p>
</div>
<PortfolioGrid projects={projects} />
<CategoryFilter />
<PortfolioGrid projects={filteredProjects} />
</div>
</section>
</div>