adding works, viewing works, but viewing specific blogs are not implemented yet.

app/write/[id]/page.tsx

@@ -0,0 +1,3 @@
+export default function ViewBlogPage() {
+  // This will take a blog id as a parameter and fetch the blog from the database using the get_blog_by_id command.
+}

app/write/page.tsx

@@ -1,7 +1,31 @@
+"use client";
+
+import { invoke } from "@tauri-apps/api/core";
+import { Blog } from "@/types";
+import { useEffect, useState } from "react";
+import BlogCard from "@/components/blog-card";
+
 export default function ViewBlogPage() {
+  const [blogs, setBlogs] = useState<Blog[]>([]);
+
+  useEffect(() => {
+    const fetchBlogs = async () => {
+      return await invoke("get_blogs");
+    };
+
+    fetchBlogs().then((blogs) => {
+      console.log("Blogs:", blogs);
+      setBlogs(blogs as Blog[]);
+    });
+  }, []);
+
   return (
     <div className="flex flex-col p-2">
-      <h1>You can view blogs here...</h1>
+      <div className="grid xs:grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4 m-4">
+        {blogs.map((blog) => (
+          <BlogCard key={blog.id} blog={blog} />
+        ))}
+      </div>
     </div>
   );
 }