Imrpoved blogs page

src/pages/BlogPost/BlogPost.tsx

@@ -0,0 +1,104 @@
+import React, { useState, useEffect } from 'react';
+import { useParams, Link, useNavigate } from 'react-router-dom';
+import { BlogPost as BlogPostType, blogPosts } from '../../data/blogPosts';
+import { LoadingSpinner } from '../../components/LoadingSpinner';
+import { ShareButtons } from '../../components/ShareButtons';
+import { CommentSection } from '../../components/CommentSection';
+
+const BlogPost: React.FC = () => {
+  const { id } = useParams<{ id: string }>();
+  const navigate = useNavigate();
+  const [post, setPost] = useState<BlogPostType | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    const loadPost = async () => {
+      try {
+        setIsLoading(true);
+        // Simulate API call
+        await new Promise(resolve => setTimeout(resolve, 500));
+        const foundPost = blogPosts.find(p => p.id === Number(id));
+        if (!foundPost) {
+          navigate('/blogs');
+          return;
+        }
+        setPost(foundPost);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    loadPost();
+  }, [id, navigate]);
+
+  if (isLoading) return <LoadingSpinner />;
+  if (!post) return null;
+
+  return (
+    <div className="min-h-screen bg-cream-50 py-8">
+      <article className="max-w-4xl mx-auto px-4">
+        <Link
+          to="/blogs"
+          className="inline-flex items-center text-sage-600 hover:text-sage-800 mb-8"
+        >
+          <svg
+            className="w-5 h-5 mr-2"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M10 19l-7-7m0 0l7-7m-7 7h18"
+            />
+          </svg>
+          Back to Blogs
+        </Link>
+
+        <header className="mb-8">
+          <img
+            src={post.imageUrl}
+            alt={`${post.character}'s blog post`}
+            className="w-full h-[400px] object-cover rounded-xl shadow-lg mb-6"
+          />
+          <h1 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4">
+            {post.title}
+          </h1>
+          <div className="flex flex-wrap items-center gap-4 text-gray-600">
+            <span className="font-medium">By {post.character}</span>
+            <span>•</span>
+            <span>{post.date}</span>
+            {post.tags && (
+              <>
+                <span>•</span>
+                <div className="flex gap-2">
+                  {post.tags.map(tag => (
+                    <span
+                      key={tag}
+                      className="bg-sage-100 text-sage-800 px-2 py-1 rounded-full text-sm"
+                    >
+                      {tag}
+                    </span>
+                  ))}
+                </div>
+              </>
+            )}
+          </div>
+        </header>
+
+        <div className="prose prose-lg max-w-none mb-8">
+          <p className="whitespace-pre-wrap">{post.content}</p>
+        </div>
+
+        <footer className="border-t border-gray-200 pt-8">
+          <ShareButtons post={post} />
+          <CommentSection postId={post.id} />
+        </footer>
+      </article>
+    </div>
+  );
+};
+
+export default BlogPost;