From dfefd65a32e7695e0c49b5aaaadfda3464fd6192 Mon Sep 17 00:00:00 2001
From: Khenziii <khenzii.was.taken@gmail.com>
Date: Mon, 30 Sep 2024 19:01:35 +0200
Subject: [PATCH] feat(website): show post preview in `/admim/blog`

---
 src/app/admin/blog/page.tsx | 20 +++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

diff --git a/src/app/admin/blog/page.tsx b/src/app/admin/blog/page.tsx
index 502ee5a3..a51ae4f5 100644
--- a/src/app/admin/blog/page.tsx
+++ b/src/app/admin/blog/page.tsx
@@ -21,6 +21,7 @@ import {
     Loading,
     CodeBlock,
 } from "@khenzii-dev/ui/atoms";
+import { MarkdownRenderer } from "@khenzii-dev/ui/molecules";
 import { Tags, type UITag } from "@khenzii-dev/ui/organisms";
 import { type BlogPost } from "@khenzii-dev/server/backend";
 import {
@@ -52,6 +53,8 @@ const AdminBlog = () => {
     const [postsOffset, setPostsOffset] = useState(0);
     const [fetchedAllPosts, setFetchedAllPosts] = useState(false);
     const [showMarkdown, setShowMarkdown] = useState(false);
+    const [blogPostTitle, setBlogPostTitle] = useState("");
+    const [blogPostContent, setBlogPostContent] = useState("");
 
     const loadingRef = useRef(null);
     const postTitleInput = useRef<HTMLInputElement>(null);
@@ -369,7 +372,16 @@ const AdminBlog = () => {
 
                             <hr className={style.line} />
 
-                            <div onClick={() => setShowMarkdown(true)}>
+                            <div onClick={() => {
+                                if (!postTitleInput.current || !postContentInput.current) return;
+
+                                const title = postTitleInput.current.value;
+                                const content = postContentInput.current.value;
+                                
+                                setBlogPostTitle(title);
+                                setBlogPostContent(content);
+                                setShowMarkdown(true);
+                            }}>
                                 <Paragraph
                                     className={clsx([style.selectParagraph, {
                                         [style.active as string]: showMarkdown,
@@ -389,6 +401,12 @@ const AdminBlog = () => {
                             />
                         </div>
 
+                        <div style={(dialogVariant === dialogVariantEnum.TAG || !showMarkdown) ? { display: "none" } : {}}>
+                            <Paragraph fontSize={2}>{blogPostTitle}</Paragraph>
+    
+                            <MarkdownRenderer>{blogPostContent}</MarkdownRenderer>
+                        </div>
+
                         <Input
                             placeholder={"Post's Title.."}
                             id={"post-input-title"}