fix: align pre-publish editor design to match post-publish article appearance

Author: dineshsutihar

app/(app)/alpha/new/[[...postIdArr]]/_client.tsx

@@ -10,7 +10,6 @@ import {
 } from "@headlessui/react";
 import { ChevronUpIcon } from "@heroicons/react/20/solid";
 import Editor from "@/components/editor/editor";
-import RenderPost from "@/components/editor/editor/RenderPost";
 import useCreatePage from "@/hooks/useCreatePage";
 import { usePrompt } from "@/components/PromptService";
 
@@ -138,7 +137,7 @@ const Create = () => {
                             <ChevronUpIcon
                               className={`${
                                 open ? "rotate-180 transform" : ""
-                              } h-5 w-5 text-neutral-400`}
+                                } h-5 w-5 text-neutral-400`}
                             />
                           </DisclosureButton>
                           <DisclosurePanel className="pb-2 pt-4">
@@ -214,68 +213,66 @@ const Create = () => {
             <div className="z-60 absolute bottom-0 left-0 right-0 top-0 bg-black opacity-25" />
           </div>
         )}
-        <div className="bg-black">
-          <div className="mx-auto w-full max-w-7xl flex-grow text-black lg:flex xl:px-8">
-            {/* Left sidebar & main wrapper */}
-            <div className="min-w-0 flex-1 xl:flex">
-              <div className="lg:min-w-0 lg:flex-1">
-                <div className="h-full min-h-[40rem] px-4 py-0 sm:px-6 lg:px-4 lg:py-6">
-                  {/* Start main area*/}
-                  <div className="relative h-full">
-                    <div className="bg-neutral-900 text-white shadow-xl">
-                      <div className="bg-neutral-900 px-4 py-6 sm:p-6 lg:pb-8">
-                        {!body && (
-                          <Controller
-                            name="body"
-                            control={control}
-                            render={({ field }) => (
-                              <Editor {...field} initialValue={"{}"} />
-                            )}
-                          />
-                        )}
-                        {body && body.length > 0 && (
-                          <Controller
-                            name="body"
-                            control={control}
-                            render={({ field }) => (
-                              <Editor {...field} initialValue={body} />
-                            )}
-                          />
-                        )}
+        <div className="mx-auto w-full max-w-7xl flex-grow text-black lg:flex xl:px-8">
+          {/* Left sidebar & main wrapper */}
+          <div className="min-w-0 flex-1 xl:flex">
+            <div className="lg:min-w-0 lg:flex-1">
+              <div className="h-full min-h-[40rem] px-4 py-0 sm:px-6 lg:px-4">
+                {/* Start main area*/}
+                <div className="relative h-full">
+                  <div className="mx-auto break-words px-2 pb-4 sm:px-4 md:max-w-3xl">
+                    <div className="prose mx-auto max-w-3xl dark:prose-invert lg:prose-lg">
+                      {!body && (
+                        <Controller
+                          name="body"
+                          control={control}
+                          render={({ field }) => (
+                            <Editor {...field} initialValue={"{}"} />
+                          )}
+                        />
+                      )}
+                      {body && body.length > 0 && (
+                        <Controller
+                          name="body"
+                          control={control}
+                          render={({ field }) => (
+                            <Editor {...field} initialValue={body} />
+                          )}
+                        />
+                      )}
 
-                        <div className="flex items-center justify-between">
-                          <>
-                            {saveStatus === "loading" && <p>Auto-saving...</p>}
-                            {saveStatus === "error" && savedTime && (
-                              <p className="text-xs text-red-600 lg:text-sm">
-                                {`Error saving, last saved: ${savedTime.toString()}`}
-                              </p>
-                            )}
-                            {saveStatus === "success" && savedTime && (
-                              <p className="text-xs text-neutral-400 lg:text-sm">
-                                {`Saved: ${savedTime.toString()}`}
-                              </p>
-                            )}
-                          </>
-                          <div />
+                      <div className="flex items-center justify-between">
+                        <>
+                          {saveStatus === "loading" && <p>Auto-saving...</p>}
+                          {saveStatus === "error" && savedTime && (
+                            <p className="text-xs text-red-600 lg:text-sm">
+                              {`Error saving, last saved: ${savedTime.toString()}`}
+                            </p>
+                          )}
+                          {saveStatus === "success" && savedTime && (
+                            <p className="text-xs text-neutral-400 lg:text-sm">
+                              {`Saved: ${savedTime.toString()}`}
+                            </p>
+                          )}
+                        </>
+                        <div />
 
-                          <div className="flex">
-                            <button
-                              type="button"
-                              disabled={isDisabled}
-                              className="ml-5 inline-flex justify-center bg-gradient-to-r from-orange-400 to-pink-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:from-orange-300 hover:to-pink-500 focus:outline-none focus:ring-2 focus:ring-pink-300 focus:ring-offset-2 disabled:opacity-50"
-                              onClick={() => setOpen(true)}
-                            >
-                              {!data?.published && "Publish"}
-                              {data?.published && "Save Changes"}
-                            </button>
-                          </div>
+                        <div className="flex">
+                          <button
+                            type="button"
+                            disabled={isDisabled}
+                            className="ml-5 inline-flex justify-center bg-gradient-to-r from-orange-400 to-pink-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:from-orange-300 hover:to-pink-500 focus:outline-none focus:ring-2 focus:ring-pink-300 focus:ring-offset-2 disabled:opacity-50"
+                            onClick={() => setOpen(true)}
+                          >
+                            {!data?.published && "Publish"}
+                            {data?.published && "Save Changes"}
+                          </button>
                         </div>
                       </div>
                     </div>
                   </div>
-                  {/* End main area */}
                 </div>
+                {/* End main area */}
               </div>
             </div>
           </div>