From 516e714fc8171f8f155a6ab16e6525ffc76f8218 Mon Sep 17 00:00:00 2001
From: Dinesh Kumar Sutihar <dineshsutihar9@gmail.com>
Date: Mon, 21 Oct 2024 11:03:29 +0530
Subject: [PATCH] refactor: remove unnecessary divs and clean up code without
 affecting layout

---
 .../alpha/new/[[...postIdArr]]/_client.tsx    | 104 ++++++++----------
 1 file changed, 44 insertions(+), 60 deletions(-)

diff --git a/app/(app)/alpha/new/[[...postIdArr]]/_client.tsx b/app/(app)/alpha/new/[[...postIdArr]]/_client.tsx
index 6d675fd9..39ffed86 100644
--- a/app/(app)/alpha/new/[[...postIdArr]]/_client.tsx
+++ b/app/(app)/alpha/new/[[...postIdArr]]/_client.tsx
@@ -137,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">
@@ -213,67 +213,51 @@ const Create = () => {
             <div className="z-60 absolute bottom-0 left-0 right-0 top-0 bg-black opacity-25" />
           </div>
         )}
-        <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="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">
-                          <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>
-                </div>
-                {/* End main area */}
+            <div className="flex items-center justify-between">
+              <div>
+                {saveStatus === "loading" && (<p className="text-xs lg:text-sm">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>
+
+              <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)}
+                aria-label={data?.published ? "Save changes to document" : "Publish document"}
+              >
+                {data?.published ? "Save Changes" : "Publish"}
+              </button>
             </div>
           </div>
         </div>