feat: added author name feature

src/components/ConfigCover.js

@@ -14,6 +14,7 @@ const defaultSettings = {
 	foregroundColor: "#ffffff",
 	textColor: "#676683",
 	opacity: 1,
+	author: 'Rutik Wankhade'
 };
 
 class ConfigCover extends React.Component {
@@ -36,6 +37,13 @@ class ConfigCover extends React.Component {
 						onChange={(e) => this.setState({ title: e.target.value })}
 					></input>
 
+					<input
+						type="text"
+						placeholder="Author"
+						className="inputTitle form-control"
+						onChange={(e) => this.setState({ author: e.target.value })}
+					></input>
+
 					<div>
 						<label>Background</label>
 						<input type="color" value={this.state.bgColor} onChange={(e) => this.setState({ bgColor: e.target.value })} />

src/components/CoverImage.css

@@ -4,10 +4,9 @@
     text-align: center;
     justify-content: center;
     align-items: center;
-    height:420px;
+    height:380px;
     width:800px;
     padding:90px;
-    margin:00px 0px 15px 0px;
 }
 
 .title-card{
@@ -33,6 +32,17 @@
     border:4px solid #676683;
 }
 
+.author{
+    float:bottom;
+    background-color: #676683;
+    color:#ffffff;
+    height:40px;
+    margin-bottom:20px;
+    padding :4px;
+    text-align:center;
+    font-weight: 500;
+}
+
 h1{height:auto;}
 
 button{

src/components/CoverImage.js

@@ -17,20 +17,24 @@ class CoverImage extends React.Component {
 	}
 
 	render() {
-		const { title, bgColor, borderColor, borderSize, borderType, pattern, foregroundColor, textColor, opacity } = this.props;
+		const { title, bgColor, borderColor, borderSize, borderType, pattern, foregroundColor, textColor, opacity, author } = this.props;
 		const styleToApply = {
 			borderTop: `${borderSize}px ${borderType} ${borderColor}`,
 			backgroundColor: `${this.hexToRgbA(foregroundColor, opacity)}`,
 			color: `${textColor}`,
 		};
 		return (
+			<div>
 				<div className={` cover ${pattern} `} style={{ backgroundColor: bgColor }}>
 					<div className={`${pattern}`}>
 						<div className="title-card" style={styleToApply}>
 							<p>{title}</p>
 						</div>
+
 					</div>
 				</div>
+				<div className="author" style={{ backgroundColor: borderColor }}>A blog by {author}</div>
+			</div>
 		);
 	}
 }