From 682ceafbcca57f3bc4f63993606e3b17985a1500 Mon Sep 17 00:00:00 2001
From: rutik wankhade <rutikwankhade2@gmail.com>
Date: Wed, 5 Aug 2020 20:00:03 +0530
Subject: [PATCH] feat:added imgconfig component

---
 src/components/App.js          | 22 ++++++------
 src/components/ConfigCover.css | 12 +++++++
 src/components/ConfigCover.js  | 63 ++++++++++++++++++++++++++++++++++
 src/components/CoverImage.css  | 19 +++++++---
 src/components/CoverImage.js   | 16 +++++----
 5 files changed, 111 insertions(+), 21 deletions(-)
 create mode 100644 src/components/ConfigCover.css
 create mode 100644 src/components/ConfigCover.js

diff --git a/src/components/App.js b/src/components/App.js
index 0a81287..e73d983 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -1,17 +1,19 @@
 import React from 'react';
-import CoverImage from './CoverImage';
+import ConfigCover from './ConfigCover';
 
 
-class App extends React.Component{
-    
-    
-    render(){
+class App extends React.Component {
+
+
+    render() {
         return (
-        
-            <CoverImage/>
-            
-            
-            );
+            <div>
+                <ConfigCover />
+            </div>
+
+
+
+        );
 
     }
 }
diff --git a/src/components/ConfigCover.css b/src/components/ConfigCover.css
new file mode 100644
index 0000000..b3b033d
--- /dev/null
+++ b/src/components/ConfigCover.css
@@ -0,0 +1,12 @@
+.container{
+    margin:20px;
+    display:flex;
+    flex-direction: column;
+    
+    justify-content: center;
+    align-items: center;
+}
+
+label{margin:5px;}
+.input-sm{width:60px;}
+input{margin:4px;}
\ No newline at end of file
diff --git a/src/components/ConfigCover.js b/src/components/ConfigCover.js
new file mode 100644
index 0000000..0e03a8f
--- /dev/null
+++ b/src/components/ConfigCover.js
@@ -0,0 +1,63 @@
+import React from 'react';
+import './ConfigCover.css'
+import CoverImage from './CoverImage';
+class ConfigCover extends React.Component {
+
+    state = {
+        title: 'How I built my first project with react',
+        height: 420,
+        width: 800,
+        bgcolor: '',
+        bxshadow: ''
+    };
+
+    render() {
+        return (
+            <div className="container">
+
+                
+                    <input type="text" placeholder="Enter title here" 
+                    onChange={e=>this.setState({title:e.target.value})}></input>
+
+                    <div className="d-flex flex-row">
+                        <label >width</label>
+                        <input type="number" name="width" className="input-sm"
+                        onChange={e=>this.setState({width:e.target.value})}></input>
+                        <label >height</label>
+                        <input type="number" name="height" className="input-sm"
+                        onChange={e=>this.setState({height:e.target.value})}></input>
+                    </div>
+
+
+                    <label>Background</label>
+                    <input type="color" defaultValue="#c5a8ff" 
+                    onChange={e=>this.setState({bgcolor:e.target.value})}/>
+
+                    <label>box-shadow</label>
+                    <input type="color" defaultValue="#8c52ff"
+                    onChange={e=>this.setState({bxshadow:e.target.value})} />
+
+
+
+                
+
+                <CoverImage 
+                title={this.state.title} 
+                bgcolor={this.state.bgcolor}
+                bxshadow={this.state.bxshadow}
+                height={this.state.height}
+                width={this.state.width}
+                />
+
+
+
+            </div>
+
+
+
+
+        );
+    }
+}
+
+export default ConfigCover;
\ No newline at end of file
diff --git a/src/components/CoverImage.css b/src/components/CoverImage.css
index 3d450df..06c9655 100644
--- a/src/components/CoverImage.css
+++ b/src/components/CoverImage.css
@@ -1,5 +1,11 @@
-.cover{
+
+.container{
     margin:auto;
+    justify-content: center;
+    align-items: center;
+}
+.cover{
+    
     width:auto;
     height:auto;
     background-color: #c5a8ff;
@@ -8,13 +14,14 @@
 }
 
 .card{
-   height:150px;
-   min-width:400px;
+   height:auto;
+   width:auto;
    border-radius: 10px;
    margin:50px;
    background-color: #ffffff; 
    display:inline-block;
-   box-shadow: 10px 10px #8c52ff;
+   box-shadow: 10px 10px  #8c52ff;
+
    text-align: center;
    color:#676683;
    border:none;
@@ -24,4 +31,6 @@
    padding:50px;
    
 }
-h1{height:auto;}
\ No newline at end of file
+h1{height:auto;}
+
+
diff --git a/src/components/CoverImage.js b/src/components/CoverImage.js
index ba88a29..d8ff9e3 100644
--- a/src/components/CoverImage.js
+++ b/src/components/CoverImage.js
@@ -2,15 +2,19 @@ import React from 'react';
 import './CoverImage.css';
 
 
-class CoverImage extends React.Component{
+class CoverImage extends React.Component {
 
 
-    render(){
+
+
+    render() {
         return (
-            <div className="cover img-fluid">
-             <div className="card">
-             <h2>5 Simple apps I built while learning JavaScript</h2>
-            </div>
+            <div className="cover container"
+                style={{ backgroundColor: this.props.bgcolor, height: this.props.height, width: this.props.width }}>
+                <div className="card"
+                    style={{ boxShadow: `15px 15px ${this.props.bxshadow}` }}>
+                    <h1>{this.props.title}</h1>
+                </div>
             </div>
         );
     }