@@ -137,7 +137,7 @@ const Create = () => {
137137                            < ChevronUpIcon 
138138                              className = { `${  
139139                                open  ? "rotate-180 transform"  : ""  
140-                                  }   h-5 w-5 text-neutral-400`} 
140+                               }   h-5 w-5 text-neutral-400`} 
141141                            /> 
142142                          </ DisclosureButton > 
143143                          < DisclosurePanel  className = "pb-2 pt-4" > 
@@ -213,67 +213,51 @@ const Create = () => {
213213            < div  className = "z-60 absolute bottom-0 left-0 right-0 top-0 bg-black opacity-25"  /> 
214214          </ div > 
215215        ) } 
216-         < div  className = "mx-auto w-full max-w-7xl flex-grow text-black lg:flex xl:px-8" > 
217-           { /* Left sidebar & main wrapper */ } 
218-           < div  className = "min-w-0 flex-1 xl:flex" > 
219-             < div  className = "lg:min-w-0 lg:flex-1" > 
220-               < div  className = "h-full min-h-[40rem] px-4 py-0 sm:px-6 lg:px-4" > 
221-                 { /* Start main area*/ } 
222-                 < div  className = "relative h-full" > 
223-                   < div  className = "mx-auto break-words px-2 pb-4 sm:px-4 md:max-w-3xl" > 
224-                     < div  className = "prose mx-auto max-w-3xl dark:prose-invert lg:prose-lg" > 
225-                       { ! body  &&  ( 
226-                         < Controller 
227-                           name = "body" 
228-                           control = { control } 
229-                           render = { ( {  field } )  =>  ( 
230-                             < Editor  { ...field }  initialValue = { "{}" }  /> 
231-                           ) } 
232-                         /> 
233-                       ) } 
234-                       { body  &&  body . length  >  0  &&  ( 
235-                         < Controller 
236-                           name = "body" 
237-                           control = { control } 
238-                           render = { ( {  field } )  =>  ( 
239-                             < Editor  { ...field }  initialValue = { body }  /> 
240-                           ) } 
241-                         /> 
242-                       ) } 
243- 
244-                       < div  className = "flex items-center justify-between" > 
245-                         < > 
246-                           { saveStatus  ===  "loading"  &&  < p > Auto-saving...</ p > } 
247-                           { saveStatus  ===  "error"  &&  savedTime  &&  ( 
248-                             < p  className = "text-xs text-red-600 lg:text-sm" > 
249-                               { `Error saving, last saved: ${ savedTime . toString ( ) }  } 
250-                             </ p > 
251-                           ) } 
252-                           { saveStatus  ===  "success"  &&  savedTime  &&  ( 
253-                             < p  className = "text-xs text-neutral-400 lg:text-sm" > 
254-                               { `Saved: ${ savedTime . toString ( ) }  } 
255-                             </ p > 
256-                           ) } 
257-                         </ > 
258-                         < div  /> 
216+         < div  className = "mx-auto break-words px-2 pb-4 sm:px-4 md:max-w-3xl" > 
217+           < div  className = "prose mx-auto max-w-3xl dark:prose-invert lg:prose-lg" > 
218+             { ! body  &&  ( 
219+               < Controller 
220+                 name = "body" 
221+                 control = { control } 
222+                 render = { ( {  field } )  =>  ( 
223+                   < Editor  { ...field }  initialValue = { "{}" }  /> 
224+                 ) } 
225+               /> 
226+             ) } 
227+             { body  &&  body . length  >  0  &&  ( 
228+               < Controller 
229+                 name = "body" 
230+                 control = { control } 
231+                 render = { ( {  field } )  =>  ( 
232+                   < Editor  { ...field }  initialValue = { body }  /> 
233+                 ) } 
234+               /> 
235+             ) } 
259236
260-                         < div  className = "flex" > 
261-                           < button 
262-                             type = "button" 
263-                             disabled = { isDisabled } 
264-                             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" 
265-                             onClick = { ( )  =>  setOpen ( true ) } 
266-                           > 
267-                             { ! data ?. published  &&  "Publish" } 
268-                             { data ?. published  &&  "Save Changes" } 
269-                           </ button > 
270-                         </ div > 
271-                       </ div > 
272-                     </ div > 
273-                   </ div > 
274-                 </ div > 
275-                 { /* End main area */ } 
237+             < div  className = "flex items-center justify-between" > 
238+               < div > 
239+                 { saveStatus  ===  "loading"  &&  ( < p  className = "text-xs lg:text-sm" > Auto-saving...</ p > ) } 
240+                 { saveStatus  ===  "error"  &&  savedTime  &&  ( 
241+                   < p  className = "text-xs text-red-600 lg:text-sm" > 
242+                     Error saving, last saved: { savedTime . toString ( ) } 
243+                   </ p > 
244+                 ) } 
245+                 { saveStatus  ===  "success"  &&  savedTime  &&  ( 
246+                   < p  className = "text-xs text-neutral-400 lg:text-sm" > 
247+                     Saved: { savedTime . toString ( ) } 
248+                   </ p > 
249+                 ) } 
276250              </ div > 
251+ 
252+               < button 
253+                 type = "button" 
254+                 disabled = { isDisabled } 
255+                 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" 
256+                 onClick = { ( )  =>  setOpen ( true ) } 
257+                 aria-label = { data ?. published  ? "Save changes to document"  : "Publish document" } 
258+               > 
259+                 { data ?. published  ? "Save Changes"  : "Publish" } 
260+               </ button > 
277261            </ div > 
278262          </ div > 
279263        </ div > 
0 commit comments