feat: added new browser preview theme

src/components/CoverImage.js

@@ -4,6 +4,7 @@ import "../assets/css/patterns.css";
 import ModernTheme from "./Themes/ModernTheme";
 import BasicTheme from "./Themes/BasicTheme";
 import OutlineTheme from "./Themes/OutlineTheme";
+import PreviewTheme from "./Themes/PreviewTheme";
 
 const CoverImage = (props) => {
 	// hexToRgbA(hex, opacity) {
@@ -26,6 +27,8 @@ const CoverImage = (props) => {
 			case 'basic': return <BasicTheme config={props} />
 			case 'modern': return <ModernTheme config={props} />
 			case 'outline': return <OutlineTheme config={props} />
+			case 'preview': return <PreviewTheme config={props} />
+
 			default: return <BasicTheme config={props} />
 		}
 	}

src/components/Editor.js

@@ -171,6 +171,8 @@ class Editor extends React.Component {
 								<option>basic</option>
 								<option>modern</option>
 								<option>outline</option>
+								<option>preview</option>
+
 							</select>
 						</div>
 

src/components/Themes/PreviewTheme.js

@@ -0,0 +1,49 @@
+import React, { useState } from 'react';
+
+const PreviewTheme = ({ config }) => {
+    const {bgColor } = config;
+
+    const [image, setImage] = useState()
+
+    return (
+        <div className="p-4 bg-white border">
+
+
+            <div className={`cover flex flex-col rounded px-4 pt-4 `}
+                style={{ backgroundColor: bgColor }}
+            >
+
+                <div className="w-10/12 mx-auto mt-auto mb-0 border-4 rounded-t-xl border-white">
+                    <div className="bg-gray-800 w-full p-3 flex rounded-t-xl">
+                        <div className="bg-red-400 h-4 w-4 rounded-full mx-2"></div>
+                        <div className="bg-yellow-400 h-4 w-4 rounded-full mx-2"></div>
+                        <div className="bg-green-400 h-4 w-4 rounded-full mx-2"></div>
+
+                    </div>
+                    {image ?
+                        <div>
+                            <img src={image && image} className="object-cover " alt="preview" />
+                        </div>
+                        :
+                        <div className="flex p-20 py-32 bg-white items-center justify-center">
+                            <input type="file"
+                                className="text-xl bg-white"
+                                onChange={(e) => setImage(URL.createObjectURL(e.target.files[0]))}
+                            />
+                        </div>
+
+                    }
+                </div>
+
+
+
+
+
+            </div>
+
+
+        </div>
+    );
+}
+
+export default PreviewTheme;