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:
@@ -1,10 +1,11 @@
|
|||||||
import { setRequestLocale } from 'next-intl/server';
|
import { setRequestLocale } from 'next-intl/server';
|
||||||
import type { Metadata } from 'next';
|
import type { Metadata } from 'next';
|
||||||
import { getTranslations } from 'next-intl/server';
|
import { getTranslations } from 'next-intl/server';
|
||||||
import { PortfolioGrid } from '@/components/portfolio';
|
import { PortfolioGrid, CategoryFilter } from '@/components/portfolio';
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
params: Promise<{ locale: string }>;
|
params: Promise<{ locale: string }>;
|
||||||
|
searchParams: Promise<{ category?: string }>;
|
||||||
};
|
};
|
||||||
|
|
||||||
const BASE_URL = process.env.NEXT_PUBLIC_SITE_URL || 'https://damjan-savic.com';
|
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;
|
const { locale } = await params;
|
||||||
setRequestLocale(locale);
|
setRequestLocale(locale);
|
||||||
|
|
||||||
const t = await getTranslations('portfolio');
|
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 (
|
return (
|
||||||
<div className="relative min-h-screen">
|
<div className="relative min-h-screen">
|
||||||
<section className="py-24">
|
<section className="py-24">
|
||||||
@@ -178,7 +187,9 @@ export default async function PortfolioPage({ params }: Props) {
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<PortfolioGrid projects={projects} />
|
<CategoryFilter />
|
||||||
|
|
||||||
|
<PortfolioGrid projects={filteredProjects} />
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user