Skip to content

Commit

Permalink
fix: align pre-publish editor design to match post-publish article ap…
Browse files Browse the repository at this point in the history 
…pearance
  • Loading branch information
@dineshsutihar
dineshsutihar committed Oct 19, 2024
1 parent 753bc7f commit 37a91d2
Showing 1 changed file with 54 additions and 57 deletions.
111 changes: 54 additions & 57 deletions app/(app)/alpha/new/[[...postIdArr]]/_client.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";

Expand Down Expand Up @@ -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">
Expand Down Expand Up @@ -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>
Expand Down

0 comments on commit 37a91d2

Please sign in to comment.