Started working on the blogs

frontend/app/(auth)/dashboard/blogs/new/page.tsx

@@ -1,14 +1,73 @@
 "use client";
-import dynamic from "next/dynamic";
+import EditableText from "@/components/editable-text";
+import { LocalEditor } from "@/components/editor";
+import { Button } from "@/components/ui/button";
+import useApiMutation from "@/hooks/use-api";
+import sluggify from "@/lib/sluggify";
+import { NewBlog } from "@/types/types";
+import { useMemo, useState } from "react";
 
-const Editor = dynamic(() => import("./editor").then((mod) => mod.default), {
-	ssr: false,
-});
+export default function BlogEditor() {
+	const [title, setTitle] = useState("");
+	const slug = useMemo(() => sluggify(title), [title]);
+	const {
+		trigger: newBlog,
+		isMutating: loading,
+		isSuccess,
+	} = useApiMutation<undefined, NewBlog>(
+		"/blog/new",
+		undefined,
+		"POST",
+		true,
+		false,
+	);
+
+	const content = localStorage.getItem("blog_draft") ?? "";
 
-export default async function NewBlog() {
 	return (
-		<>
-			<Editor />
-		</>
+		<section className="m-10">
+			{/* This div should have a proper layout, ONLY PART TO BE MODIFIED*/}
+			<div>
+				{/*Should have an image or a placeholder that opens a dialog when clicked on to set the url of an image.*/}
+				<EditableText onChange={setTitle}>
+					<h1>{title}</h1>
+				</EditableText>
+				<p className="text-muted">{slug}</p>
+				{/*Should have a summary input box or textarea*/}
+			</div>
+			<div className="flex">
+				<div className="flex-1">
+					<LocalEditor content={content} setTitle={setTitle} />
+				</div>
+			</div>
+
+			<Button
+				className="text-black bg-white"
+				onClick={async () => {
+					try {
+						const blogContent = localStorage.getItem("blog_draft");
+						if (!blogContent) return;
+						if (title.length < 1) return;
+						const res = await newBlog({
+							title,
+							summary: "A summary",
+							image: "none",
+							slug,
+							content: blogContent,
+						});
+						if (!res)
+							throw new Error("The server hasn't responded.");
+						if (res.status === "Error")
+							throw new Error(res.message);
+						if (res.data) console.log(res.data);
+						return res;
+					} catch (error: any) {
+						throw new Error(error.message);
+					}
+				}}
+			>
+				Sauvegarder
+			</Button>
+		</section>
 	);
 }