refined design

app/research/[slug]/page.tsx

@@ -5,13 +5,14 @@ import { notFound } from 'next/navigation';
 import { getPublicationsData } from '@/lib/publications';
 import { Article } from '@/components/page-article';
 import { DATA } from '@/app/resume';
+import { Props } from '@/components/types';
 
 export async function generateStaticParams() {
   const slugs = getPostSlugs('research');
   return slugs.map((slug) => ({ slug }));
 }
 
-export async function generateMetadata({ params }: { params: { slug: string } }) {
+export async function generateMetadata({ params }: Props ) {
   const { slug } = await params;
 
   const post = await getPostBySlug('research', slug);
@@ -22,7 +23,7 @@ export async function generateMetadata({ params }: { params: { slug: string } })
   };
 }
 
-export default async function ResearchPage({ params }: { params: { slug: string } }) {
+export default async function ResearchPage({ params }: Props ) {
   const { slug } = await params;
 
   const post = await getPostBySlug('research', slug);
@@ -42,8 +43,8 @@ export default async function ResearchPage({ params }: { params: { slug: string
   const nextPost = nextSlug ? await getPostBySlug('research', nextSlug) : null;
 
   const navigation = {
-    prev: prevPost ? { slug: prevSlug, title: prevPost.frontmatter.title } : null,
-    next: nextPost ? { slug: nextSlug, title: nextPost.frontmatter.title } : null,
+    prev: prevPost ? { slug: prevSlug!, title: prevPost.frontmatter.title } : null,
+    next: nextPost ? { slug: nextSlug!, title: nextPost.frontmatter.title } : null,
   };
 
   return <Article post={post} publications={publications} navigation={navigation} basePath="research" />;

app/research/page.tsx

@@ -1,51 +1,33 @@
-import { getSortedPostsData } from "@/lib/posts";
-import { ProjectCard } from "@/components/project-card";
-import { BlurFade } from "@/components/magicui/blur-fade";
+// NO "use client" here. This is a Server Component.
 
-const BLUR_FADE_DELAY = 0.04;
+import { getSortedPostsData, getAllTags } from "@/lib/posts";
+import { FilterableResearchGrid } from "@/components/filterable-research-list"; // Import the new client component
 
 export default function ResearchPage() {
-  const posts = getSortedPostsData("research");
+  // These functions run safely on the server because this is a Server Component.
+  const allPosts = getSortedPostsData("research");
+  const allTags = getAllTags(5, "research");
 
   return (
     <main className="flex flex-col min-h-[100dvh] space-y-10">
       <section id="research">
-        <div className="mx-auto w-full max-w-6xl space-y-8">
+        <div className="mx-auto w-full max-w-6xl space-y-8 px-4">
           <div className="space-y-2">
             <h1 className="text-3xl font-bold tracking-tighter sm:text-5xl xl:text-6xl/none mt-12">
               Research
             </h1>
-            <p className="text-muted-foreground">
+            <p className="max-w-3xl text-muted-foreground">
               This section details my scientific publications, primarily focused
-              on advancing machine learning and deep neural networks.
-              My involvement has spanned, from conceptualizing the ideas 
-              and developing machine learning models, to providing support 
-              to my colleagues.
+              on advancing machine learning and deep neural networks. My
+              involvement has spanned, from conceptualizing the ideas and
+              developing machine learning models, to providing support to my
+              colleagues.
             </p>
           </div>
           <hr />
-          <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-2">
-            {posts
-              .filter((post) => post.title)
-              .map((post, id) => (
-              <BlurFade
-                key={post.title}
-                delay={BLUR_FADE_DELAY * 2 + id * 0.005}
-              >
-                <ProjectCard
-                  href={post.href}
-                  key={post.title}
-                  title={post.title!}
-                  description={post.excerpt || ""}
-                  dates={post.date}
-                  tags={post.tags}
-                  image={post.image || ""}
-                  video={post.video}
-                  links={[]}
-                />
-              </BlurFade>
-            ))}
-          </div>
+
+          <FilterableResearchGrid posts={allPosts} tags={allTags} />
+
         </div>
       </section>
     </main>