add empty preview

maheshj01 · Oct 8, 2024 · 388e718 · 388e718
1 parent c963834
commit 388e718
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 21 deletions.
diff --git a/public/sw.js.map b/public/sw.js.map
diff --git a/src/app/(main)/_components/Editor.tsx b/src/app/(main)/_components/Editor.tsx
@@ -65,27 +65,36 @@ const Editor: React.FC<PSEditorProps> = ({ value, onChange, placeHolder, preview
     `;
 
     const customClass = `px-2 py-2 rounded-b-lg border-surface focus:ring-secondary focus:outline-none focus:ring-2 focus:ring-2 resize-y min-h-80 w-full ${className}`;
-    if (preview) {
-        return <MDPreview
-            className={`${customClass} reactMarkDown`}
-            value={value}
-        />;
-    }
     return (
-        <TextCompletionInput
-            customClass={`${customClass} line-break`}
-            // We need editor state only when editing
-            value={isRepublish ? value : editorStateRef.current.getCurrentValue()}
-            onChange={handleChange}
-            disabled={disabled}
-            placeholder={placeHolder || placeholder}
-            height="70vh"
-            autoSuggest={false}
-            maxHeight="100%"
-            onUndo={handleUndo}
-            onRedo={handleRedo}
-        />
-    );
+        <div className="relative">
+            {preview ? (
+                // if value is empty, show placeholder
+                value ? (
+                    <MDPreview
+                        className={`${customClass} reactMarkDown ${preview ? 'fade-in-animation' : 'fade-out-animation'}`}
+                        value={value}
+                    />
+                ) : (
+                    <div className={`flex justify-center items-center rounded-b-lg ${customClass}`} >
+                        <p>Nothing to Preview</p>
+                    </div>)
+            ) : (
+                <TextCompletionInput
+                    customClass={`${customClass} line-break ${!preview ? 'fade-in-animation' : 'fade-out-animation'}`}
+                    // We need editor state only when editing
+                    value={isRepublish ? value : editorStateRef.current?.getCurrentValue()}
+                    onChange={handleChange}
+                    disabled={disabled}
+                    placeholder={placeHolder || placeholder}
+                    height="70vh"
+                    autoSuggest={false}
+                    maxHeight="100%"
+                    onUndo={handleUndo}
+                    onRedo={handleRedo}
+                />
+            )}
+        </div>
+    )
 
 };
 

diff --git a/src/app/style.css b/src/app/style.css
@@ -38,6 +38,16 @@
     }
 }
 
+@keyframes fadeIn{
+    0% {
+        opacity: 0;
+    }
+
+    100% {
+        opacity: 1;
+    }
+}
+
 @keyframes revealFromBottom {
     0% {
         clip-path: inset(100% 0 0 0);
@@ -72,6 +82,10 @@
     animation: fadeOut 0.5s ease-out forwards;
 }
 
+.fade-in-animation {
+    animation: fadeIn 0.5s ease-out forwards;
+}
+
 .reveal-in-animation {
     animation: revealFromLeft 1s ease-out;
     overflow: hidden