75 lines
1.7 KiB
TypeScript
75 lines
1.7 KiB
TypeScript
|
import React, {useEffect, useState} from "react";
|
||
|
|
import {useParams, useNavigate} from "react-router-dom";
|
||
|
|
import axios from "axios";
|
||
|
|
|
||
|
|
import {Button} from "@/components/ui/button";
|
||
|
|
import {Card, CardContent} from "@/components/ui/card";
|
||
|
|
import {getBlogByIdApi} from "@/api/blog";
|
||
|
|
|
||
|
|
const BlogDetail = () => {
|
||
|
|
const {id} = useParams();
|
||
|
|
const navigate = useNavigate();
|
||
|
|
const [blog, setBlog] = useState<any>(null);
|
||
|
|
|
||
|
|
const fetchBlogById = async () => {
|
||
|
|
try {
|
||
|
|
const response = await getBlogByIdApi(Number(id));
|
||
|
|
|
||
|
|
setBlog(response);
|
||
|
|
} catch (error) {
|
||
|
|
console.error("Error fetching blog", error);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
fetchBlogById();
|
||
|
|
}, [id]); // ✅ FIXED dependency
|
||
|
|
|
||
|
|
if (!blog) {
|
||
|
|
return <div className="mt-40 text-center text-gray-500">Loading...</div>;
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className=" mx-auto flex flex-col ">
|
||
|
|
<Card>
|
||
|
|
<CardContent className="p-6 space-y-4">
|
||
|
|
{/* Back */}
|
||
|
|
<Button
|
||
|
|
variant="ghost"
|
||
|
|
className="text-black-600 p-0"
|
||
|
|
onClick={() => navigate(-1)}
|
||
|
|
>
|
||
|
|
← Back
|
||
|
|
</Button>
|
||
|
|
|
||
|
|
{/* Title */}
|
||
|
|
<h1 className="text-2xl md:text-4xl lg:text-5xl font-bold">
|
||
|
|
{blog.title}
|
||
|
|
</h1>
|
||
|
|
|
||
|
|
{/* Meta */}
|
||
|
|
<p className="text-gray-500 text-sm">
|
||
|
|
{blog.writer} • {new Date(blog.createdAt).toLocaleDateString()}
|
||
|
|
</p>
|
||
|
|
|
||
|
|
{/* Image */}
|
||
|
|
<img
|
||
|
|
src={blog.image}
|
||
|
|
alt={blog.title}
|
||
|
|
className="w-full h-[220px] md:h-[400px] object-cover rounded-md"
|
||
|
|
/>
|
||
|
|
|
||
|
|
{/* Content */}
|
||
|
|
<div className="space-y-3 text-gray-800 leading-relaxed">
|
||
|
|
{blog.content?.blocks?.map((block: any, index: number) => (
|
||
|
|
<p key={index}>{block.data?.text}</p>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</CardContent>
|
||
|
|
</Card>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default BlogDetail;
|