create cover component and add font option

src/components/App.css

@@ -1,44 +0,0 @@
-/* @import url('https://fonts.googleapis.com/css2?family=Inter:wght@900&display=swap');
-
-html,
-body,
-#root {
-  height: 100%;
-}
-.navbar {
-  color: #ffffff;
-  padding-left: 40px;
-  background-color: #54436B;
-  padding: 10px 10px 10px 35px;
-
-}
-.content {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-}
-.logo {
-  height: 30px;
-  width: 30px;
-  margin-right: 10px;
-}
-
-a:hover{
-  text-decoration: none;
-}
-
-.star-btn{
-    background-color: #262626;
-    padding:5px 10px 5px 10px;
-    color:#ffffff;
-    border-radius:5px;
-    font-weight:600;
-    margin-left:auto;
-    margin-right:10px;
-}
-
-@media screen and (max-width: 600px) {
-  footer {
-    margin-top: 40px;
-  }
-} */

src/components/ComponentToImg.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { exportComponentAsJPEG, exportComponentAsPNG } from "react-component-export-image";
+import { exportComponentAsPNG } from "react-component-export-image";
 import "./CoverImage.css";
 
 class ComponentToImg extends React.Component {
@@ -9,22 +9,14 @@ class ComponentToImg extends React.Component {
 	}
 
 	render() {
-		// console.log(this.props.children);
+
-		let downloadButton;
-		// eslint-disable-next-line default-case
-		switch (this.props.downloadAs) {
-			case "PNG":
-				downloadButton = <button onClick={() => exportComponentAsPNG(this.componentRef,'cover')}>Download</button>;
-				break;
-			case "JPEG":
-				downloadButton = <button onClick={() => exportComponentAsJPEG(this.componentRef,'cover')}>Download</button>;
-		}
-		// console.log(downloadButton);
 
 		return (
 			<React.Fragment>
 				<div ref={this.componentRef}>{this.props.children}</div>
-				{downloadButton}
+				<button
+					className="border p-2 bg-gray-700 hover:bg-gray-800 text-white text-xl rounded m-4 px-4"
+					onClick={() => exportComponentAsPNG(this.componentRef, 'cover')}>Download</button>
 			</React.Fragment>
 		);
 	}

src/components/CoverImage.css

@@ -1,85 +1,15 @@
 .cover {
     background-color: #00ff99;
     display: flex;
-    justify-content: center;
+  
-    align-items: center;
     height: 420px;
     width: 800px;
-    border-radius: 2px;
+
     overflow-y: hidden;
-    padding: 40px;
+  
 
 
 }
 
-.flex-row {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-
-}
-
-.title-card {
-    border-radius: 10px;
-    background-color: #ffffff;
-    text-align: left;
-    color: #676683;
-    justify-content: center;
-    align-items: center;
-    vertical-align: middle;
-    width: 90%;
-    border: none;
-    padding: 40px;
-    font-family: inter;
-    margin: auto;
-    /* box-shadow: 13px 10px 36px 2px rgba(0, 0, 0, 0.22); */
-
-}
-
-.title {
-    font-size: 40px;
-    font-weight: 700;
-
-}
-
-i {
-    font-size: 110px;
-    margin: 2vw;
-}
-
-.author-text {
-    font-size: 22px;
-    font-weight: 600;
-    margin-top: 20px;
-    border-top: solid 4px  #d4d4dd
-; 
-    width:max-content;
-    padding-top:10px;
-}
 
 
-h1 {
-    height: auto;
-}
-
-
-@media screen and (max-width:600px) {
-    .cover {
-        width: 100vw;
-        height: 50vh;
-        padding: 4vh;
-    }
-
-    .title {
-        font-size: 1.5rem;
-    }
-
-    .author-text {
-        font-size: 12px;
-    }
-
-    i {
-        font-size: 12vh;
-    }
-
-}

src/components/CoverImage.js

@@ -1,6 +1,7 @@
 import React from "react";
 import "./CoverImage.css";
 import "../assets/css/patterns.css";
+import BasicTheme from "./Themes/BasicTheme";
 
 class CoverImage extends React.Component {
 	// hexToRgbA(hex, opacity) {
@@ -17,27 +18,10 @@ class CoverImage extends React.Component {
 	// }
 
 	render() {
-		const { title, bgColor, pattern, author, icon } = this.props;
+		// const { title, bgColor, pattern, author, icon,font } = this.props;
 	
 		return (
-			<div>
+			<BasicTheme config={ this.props}/>
-				<div className={` cover ${pattern} `} style={{ backgroundColor: bgColor }}>
-					<div className={`${pattern}`}>
-
-						<div className="title-card">
-							<div className="flex-row">
-								<i className={`devicon-${icon.value}-plain dev-icon `}></i>
-								<div>
-									<h1 className="title">{title}</h1>
-									<h2 className="author-text"> {author}</h2>
-								</div>
-							</div>
-						</div>
-
-					</div>
-				</div>
-				
-			</div>
 		);
 	}
 }

src/components/Editor.js

@@ -14,6 +14,7 @@ const defaultSettings = {
 	author: 'Rutik Wankhade',
 	icon: { 'label': 'react', 'value': 'react' },
 	devIconOptions: {},
+	font: 'font-sans'
 
 };
 
@@ -43,7 +44,7 @@ class Editor extends React.Component {
 	render() {
 		return (
 			<div className="flex bg-gray-50 ">
-				<div className="bg-white  p-4 flex flex-col md:w-1/4">
+				<div className="bg-white shadow-sm p-4 flex flex-col md:w-1/4">
 					{/* <p className="tagline"><span role="img" aria-label="tool"> 🛠 </span> Creating cover images for your blogs is now super easy</p> */}
 
 
@@ -76,10 +77,15 @@ class Editor extends React.Component {
 						<div className="flex flex-col m-2 w-1/2">
 							<span className="font-medium">Font</span>
 
-							<select className=" text-gray-700 text-xl p-2 rounded border">
+							<select
-								<option>Serif</option>
+								value={this.state.font}
-								<option>Sans</option>
+
-								<option>mono</option>
+								onChange={(e) => this.setState({ font: e.target.value })}
+
+								className=" text-gray-700 text-xl p-2 rounded border">
+								<option>font-serif</option>
+								<option>font-sans</option>
+								<option>font-mono</option>
 							</select>
 						</div>
 						<div className="flex flex-col m-2 ">

src/components/RandomTheme.css

@@ -1,31 +1,13 @@
-.random-btn{
-    height: 40px;
-    width: 40px;
-    padding: 5px;
-    border-radius: 6px;
-    cursor: pointer;
-    background-color: #ffffff;
-    justify-content: center;
-    align-items: center;
-    margin: auto;
-    border: 2px solid #ccccff;
 
-}
+.shuffle-btn:active{
-.random-btn:active{
     transform: rotate(360deg);
     transition: all 0.2s ease-out;
 }
-.random-btn:hover{
+
-    border-color:  #66ff99;
-}
 .bi-shuffle{
     height: 25px;
     width: 25px;
     opacity: 0.6;
 }
 
-@media screen and(max-width:600px){
+
-.random-btn{
-    margin: 20px;
-}
-}

src/components/RandomTheme.js

@@ -107,7 +107,7 @@ class RandomTheme extends React.Component {
 
     render() {
         return (
-            <div className="random-btn" onClick={this.changeTheme}>
+            <div className="shuffle-btn border bg-white p-2 rounded cursor-pointer" onClick={this.changeTheme}>
                 <svg width="1em" height="1em" viewBox="0 0 16 16" className="bi bi-shuffle" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                     <path fillRule="evenodd" d="M0 3.5A.5.5 0 0 1 .5 3H1c2.202 0 3.827 1.24 4.874 2.418.49.552.865 1.102 1.126 1.532.26-.43.636-.98 1.126-1.532C9.173 4.24 10.798 3 13 3v1c-1.798 0-3.173 1.01-4.126 2.082A9.624 9.624 0 0 0 7.556 8a9.624 9.624 0 0 0 1.317 1.918C9.828 10.99 11.204 12 13 12v1c-2.202 0-3.827-1.24-4.874-2.418A10.595 10.595 0 0 1 7 9.05c-.26.43-.636.98-1.126 1.532C4.827 11.76 3.202 13 1 13H.5a.5.5 0 0 1 0-1H1c1.798 0 3.173-1.01 4.126-2.082A9.624 9.624 0 0 0 6.444 8a9.624 9.624 0 0 0-1.317-1.918C4.172 5.01 2.796 4 1 4H.5a.5.5 0 0 1-.5-.5z" />
                     <path d="M13 5.466V1.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384l-2.36 1.966a.25.25 0 0 1-.41-.192zm0 9v-3.932a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384l-2.36 1.966a.25.25 0 0 1-.41-.192z" />

src/components/Themes/BasicTheme.js

@@ -0,0 +1,34 @@
+import React from 'react';
+
+
+const BasicTheme = ({ config }) => {
+    const { title, bgColor, pattern, author, icon, font } = config;
+
+    return (
+        <div className="p-4 bg-white border">
+            <div className={`cover flex p-14 text-gray-800 items-center ${pattern} `}
+                style={{ backgroundColor: bgColor }}
+            >
+                <div className={`${pattern}`}>
+
+                    <div className={`${font} bg-white flex flex-col pt-12 rounded-xl`}>
+                        <div className="px-12">
+                            <div>
+                                <h1 className="text-5xl font-bold text-center">{title}</h1>
+                            </div>
+                        </div>
+
+                        <div className=" flex mx-4 mt-10 p-4 rounded-xl items-center bg-white">
+                            <i className={`devicon-${icon.value}-plain dev-icon text-4xl`}></i>
+                            <h2 className="text-xl ml-auto mr-2 font-semibold"> - {author}</h2>
+
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+        </div>
+    );
+}
+
+export default BasicTheme;