feat: add mobile mockup theme

src/components/ComponentToImg.js

@@ -26,7 +26,7 @@ const ComponentToImg = (props) => {
 		// exportComponentAsPNG(componentRef, 'cover')
 		// console.log(unsplashImage.downloadLink)
 
-		unsplash.photos.trackDownload({ downloadLocation: unsplashImage.downloadLink, });
+		// unsplash.photos.trackDownload({ downloadLocation: unsplashImage.downloadLink, });
 		const element = componentRef.current; // You can use element's ID or Class here
 
 		// console.log(element)
@@ -42,7 +42,9 @@ const ComponentToImg = (props) => {
 				height: element.offsetHeight + "px",
 			}
 		})
-		await saveImage(data)
+
+		console.log(data)
+		await saveImage(data);
 
 
 	}

src/components/CoverImage.js

@@ -6,7 +6,7 @@ import BasicTheme from "./Themes/BasicTheme";
 import OutlineTheme from "./Themes/OutlineTheme";
 import PreviewTheme from "./Themes/PreviewTheme";
 import StylishTheme from "./Themes/StylishTheme";
-
+import MobileMockupTheme from "./Themes/MobileMockupTheme";
 
 const CoverImage = (props) => {
 	// hexToRgbA(hex, opacity) {
@@ -31,6 +31,7 @@ const CoverImage = (props) => {
 			case 'outline': return <OutlineTheme config={props} />
 			case 'preview': return <PreviewTheme config={props} />
 			case 'stylish': return <StylishTheme config={props} />
+			case 'mobile': return <MobileMockupTheme config={props} />
 
 			default: return <BasicTheme config={props} />
 		}

src/components/Editor.js

@@ -17,14 +17,14 @@ import theme5 from '../assets/images/theme5.webp'
 
 const defaultSettings = {
 	title: "A begineers guide to frontend development",
-	bgColor: "#ffe9e3",
+	bgColor: "#949ee5",
 	pattern: "",
 	download: "PNG",
 	author: 'Rutik Wankhade',
 	icon: { 'label': 'react', 'value': 'react' },
 	devIconOptions: {},
 	font: 'font-Anek',
-	theme: 'stylish',
+	theme: 'mobile',
 	customIcon: '',
 	platform: 'hashnode'
 

src/components/Themes/MobileMockupTheme.js

@@ -0,0 +1,67 @@
+import React, { useState } from 'react';
+
+const MobileMockupTheme = ({ config }) => {
+    const { bgColor, platform, title } = config;
+
+    const [image, setImage] = useState()
+
+    return (
+        <div className="p-4 bg-white">
+
+
+            <div className={`overflow-y-hidden flex flex-row px-10 items-center justify-center rounded px-8 pt-4  ${platform}`}
+                style={{ backgroundColor: bgColor }}
+            >
+
+
+                <h1 className="text-2xl w-1/2 md:text-4xl px-4 text-white font-bold text-left">{title}</h1>
+
+                <div className="w-5/12 mx-auto m-4 mt-10 group mx-auto h-full  shadow-lg  flex flex-col  bg-white border-t-8 border-x-8 border-gray-800 rounded-t-3xl border-white">
+                    <div className="bg-gray-800 h-8 w-full p-2 pb-3 flex items-center rounded-t">
+
+                        <div className="flex mx-auto items-center">
+
+                            <div className="bg-white h-3 w-3 rounded-full mx-1"></div>
+                            <div className="bg-white h-2 w-20 rounded-full mx-1"></div>
+
+                        </div>
+
+
+                    </div>
+
+
+
+                    {image ?
+                        <div className="group relative">
+                            <img src={image && image} className="object-cover rounded -translate-y-1 h-full" alt="preview" />
+                            <button
+                                onClick={() => setImage('')}
+                                className="ml-auto mr-4 cursor-pointer">
+                                <svg className="group-hover:inline-block absolute top-4 right-2  bg-gray-500 hidden w-8 h-8 p-2 text-white rounded-full z-10" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12"></path></svg>
+
+                            </button>
+                        </div>
+                        :
+                        <div className="flex flex-col px-4 rounded-xl py-20 bg-white items-center justify-center">
+                            <input type="file"
+                                className="text-sm  flex flex-col cursor-pointer mb-2 bg-white rounded border"
+                                onChange={(e) => setImage(URL.createObjectURL(e.target.files[0]))}
+                            />
+                            <span className=" text-center italic">click to upload a screenshot</span>
+                        </div>
+
+                    }
+                </div>
+
+
+
+
+
+            </div>
+
+
+        </div>
+    );
+}
+
+export default MobileMockupTheme;