feat: show author name instead of user x

frontend/src/utils/BlogViewer.tsx

@@ -26,21 +26,43 @@ export function BlogViewer() {
 
   const isAuthor = me === String(blog.author_id);
 
+  const handleDelete = async () => {
+    if (!window.confirm(`Are you sure you want to delete ${blog.title}`))
+      return;
+
+    try {
+      const res = await fetch(`${API_URL}/blogs/${slug}`, {
+        method: "DELETE",
+        headers: { Accept: "application/json" },
+      });
+      if (!res.ok) throw new Error(await res.text());
+      navigate("/");
+    } catch (err) {
+      console.error("Delete failed:", err);
+      alert("Could not delete post. See console for details.");
+    }
+  };
+
   return (
     <div className="max-w-2xl mx-auto py-10 space-y-6">
       {isAuthor && (
-        <button
-          onClick={() => navigate(`/blog/${slug}/edit`)}
-          className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
-        >
-          Edit this post
-        </button>
+        <div className="flex space-x-4">
+          <button
+            onClick={() => navigate(`/blog/${slug}/edit`)}
+            className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
+          >
+            Edit
+          </button>
+          <button
+            onClick={handleDelete}
+            className="px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700"
+          >
+            Delete
+          </button>
+        </div>
       )}
       <h1 className="text-3xl font-bold">{blog.title.toUpperCase()}</h1>
-      <p className="text-sm text-gray-500">By User {blog.author_id}</p>
-      <p className="italic text-gray-600 dark:text-gray-400">
-        {blog.description}
-      </p>
+      <p className="text-sm text-gray-500">By {blog.author_name}</p>
       <div className="markdown-body mx-auto p-4">
         <Markdown
           remarkPlugins={[remarkGfm, remarkRehype]}