Function ReadMoreBlog

client/src/component/ReadMoreBlog.jsx:24–94

(props)

const ReadMoreBlog = (props) => {
    const VITE_SERVER_PORT = import.meta.env.VITE_SERVER_PORT || "https://bitbox-uxbo.onrender.com";

    const { id } = useParams();
    const [blogPost, setBlogPost] = useState(null);
    const fetchData = async () => {
        try {
            const response = await fetch(`${VITE_SERVER_PORT}/api/blog/getById/${id}`);

            const data = await response.json();
            setBlogPost(data.blog); // Set the retrieved blog post to state
        } catch (error) {
            console.error('Error fetching blog post:', error);
        }
    };

    useEffect(() => {
        fetchData();
    }, [id]);

    const categoryImage = (cat) => {
        const imgSrc = images.find(image => image.category === cat);
        if (imgSrc) {
            return imgSrc.src;
        }
        return '' // Safeguard for undefined
    };

    if (!blogPost) return <div>Loading...</div>;

    return (
        <>
            <div className={`max-w-3xl mx-auto my-8 mt-36 ${props.mode === 'light' ? 'bg-white' : 'bg-gray-800'} rounded-lg shadow-md overflow-hidden`}>
                <img
                    src={categoryImage(blogPost.category)}
                    alt={blogPost.title}
                    className="w-full h-64 object-cover"
                    onError={(e) => { e.target.onerror = null; e.target.src = '/placeholder.svg'; }}
                />
                <div className="p-6">
                    <h1 className={`text-3xl font-bold ${props.mode === 'light' ? 'text-gray-900' : 'text-white'} mb-4`}>{blogPost.title}</h1>
                    <div className={`flex items-center ${props.mode === 'light' ? 'text-gray-600' : 'text-gray-400'} text-sm mb-4`}>
                        <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 mr-2" viewBox="0 0 24 24" stroke="currentColor" fill="none">
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
                        </svg>
                        <time dateTime={new Date(blogPost.date).toISOString()}>
                            {new Date(blogPost.date).toDateString()}
                        </time>
                        <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 ml-4 mr-2" viewBox="0 0 24 24" stroke="currentColor" fill="none">
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
                        </svg>
                        <span>{blogPost.category}</span>
                    </div>
                    <div
                        className={`${props.mode === 'light' ? 'text-gray-700' : 'text-gray-100'} leading-relaxed mb-4`}
                        dangerouslySetInnerHTML={{ __html: blogPost.content }}
                    />
                </div>