feat: implement toast notifications for image upload and blog post creation

src/pages/CreatePost.tsx

@@ -3,11 +3,14 @@ import { useNavigate } from 'react-router-dom';
 import Layout from '../components/Layout';
 import BlogEditor, { type BlogEditorRef } from '../blog/BlogEditor';
 import { uploadImage, createBlogPost } from '../blog/api';
+import { Toast } from '../components/Toast';
+import { useToast } from '../hooks/useToast';
 import '../App.css';
 
 function CreatePost() {
   const navigate = useNavigate();
   const editorRef = useRef<BlogEditorRef>(null);
+  const { toasts, removeToast, success, error } = useToast();
   const [title, setTitle] = useState('');
   const [coverImage, setCoverImage] = useState<string | null>(null);
   const [coverImageKey, setCoverImageKey] = useState<string>('');
@@ -47,10 +50,11 @@ function CreatePost() {
       setCoverImageKey(fileKey);
       setCoverImage(url);
       setUploadProgress(100);
-      console.log('✅ Cover image uploaded successfully');
-    } catch (error) {
-      setUploadError(error instanceof Error ? error.message : 'Upload failed');
-      console.error('❌ Cover image upload failed:', error);
+      success('Cover image uploaded successfully!');
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : 'Upload failed';
+      setUploadError(errorMessage);
+      error(`Cover image upload failed: ${errorMessage}`);
     } finally {
       setIsUploading(false);
     }
@@ -79,16 +83,17 @@ function CreatePost() {
       // Get the actual editor state as JSON
       const content = editorRef.current.getEditorState();
 
-      const response = await createBlogPost(title, content, coverImageKey);
+      await createBlogPost(title, content, coverImageKey);
       
-      console.log('✅ Blog post created successfully:', response.postId);
-      alert('Blog post created successfully!');
+      success('Blog post published successfully!', 2000);
       
-      // Navigate to the blog page or the created post
-      navigate('/blog');
-    } catch (error) {
-      console.error('❌ Failed to create blog post:', error);
-      alert(error instanceof Error ? error.message : 'Failed to create blog post');
+      // Navigate to the blog page after a short delay
+      setTimeout(() => {
+        navigate('/blog');
+      }, 1500);
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : 'Failed to create blog post';
+      error(`Failed to publish post: ${errorMessage}`);
     } finally {
       setIsSubmitting(false);
     }
@@ -96,6 +101,7 @@ function CreatePost() {
 
   return (
     <Layout currentPage="blog">
+      <Toast toasts={toasts} onRemove={removeToast} />
       <div style={{
         maxWidth: '900px',
         margin: '0 auto',