fix: build

Author: Simana-poudel

app/(public)/blog/[id]/page.tsx

@@ -1,44 +1,9 @@
-"use client";
-import { notFound } from "next/navigation";
-import React, { useEffect, useState } from "react";
-import { useParams } from "next/navigation";
 import BlogDeatails from "@/components/blog/details";
-import { blogData } from "@/static/blog";
-import { BlogItem } from "@/types/blog";
-
-const BlogPage = () => {
-  const params = useParams();
-  const [isLoading, setIsLoading] = useState(true);
-  const [post, setPost] = useState<BlogItem | null>(null);
-
-  useEffect(() => {
-    if (params.id) {
-      const foundPost = blogData.find((item) => item.id === params.id);
-      setPost(foundPost || null);
-      setIsLoading(false);
-    }
-  }, [params.id]);
-
-  if (isLoading) {
-    return <div>Loading...</div>;
-  }
-
-  if (!post) {
-    notFound();
-  }
 
+export default function page() {
   return (
     <div>
-      <BlogDeatails
-        id={post.id}
-        image={post.image}
-        title={post.title}
-        description={post.description}
-        content={post.content}
-        author={post.author}
-      />
+      <BlogDeatails />
     </div>
   );
-};
-
-export default BlogPage;
+}

components/blog/details/index.tsx

@@ -1,22 +1,36 @@
-import React from "react";
+"use client";
+
+import React, { useEffect, useState } from "react";
+import { useParams } from "next/navigation";
+import { blogData } from "@/static/blog";
 import { BlogItem } from "@/types/blog";
 import DetailHero from "./DetailHero";
 import DetailContent from "./DetailContent";
 
-const BlogDeatails = ({ image, title, content, author }: BlogItem) => {
+const BlogDeatails = () => {
+  const params = useParams(); // get id from URL
+  const [post, setPost] = useState<BlogItem | null>(null);
+
+  useEffect(() => {
+    if (params?.id) {
+      const found = blogData.find((b) => b.id.toString() === params.id);
+      setPost(found || null);
+    }
+  }, [params?.id]);
+
+  if (!post) return <div>Loading or blog not found...</div>;
+
   return (
     <div className="flex flex-col">
       <DetailHero
-        imageSrc={image}
-        title={title}
-        authorName={author.name}
-        authorAvatar={author.avatar}
-        date={author.date}
-        readTime={author.readTime}
-        className=""
+        imageSrc={post.image}
+        title={post.title}
+        authorName={post.author.name}
+        authorAvatar={post.author.avatar}
+        date={post.author.date}
+        readTime={post.author.readTime}
       />
-
-      <DetailContent content={content} />
+      <DetailContent content={post.content} />
     </div>
   );
 };