From 412eaa56d281a211c27fd32c90e01903337c4bac Mon Sep 17 00:00:00 2001 From: rutik wankhade Date: Sat, 16 Apr 2022 15:08:46 +0530 Subject: [PATCH] create cover component and add font option --- src/components/App.css | 44 ----------------- src/components/ComponentToImg.js | 18 ++----- src/components/CoverImage.css | 76 ++--------------------------- src/components/CoverImage.js | 22 ++------- src/components/Editor.js | 16 ++++-- src/components/RandomTheme.css | 26 ++-------- src/components/RandomTheme.js | 2 +- src/components/Themes/BasicTheme.js | 34 +++++++++++++ 8 files changed, 61 insertions(+), 177 deletions(-) delete mode 100644 src/components/App.css create mode 100644 src/components/Themes/BasicTheme.js diff --git a/src/components/App.css b/src/components/App.css deleted file mode 100644 index 09c5cef..0000000 --- a/src/components/App.css +++ /dev/null @@ -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; - } -} */ diff --git a/src/components/ComponentToImg.js b/src/components/ComponentToImg.js index 5d5250f..faa7b9a 100644 --- a/src/components/ComponentToImg.js +++ b/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 = ; - break; - case "JPEG": - downloadButton = ; - } - // console.log(downloadButton); + return (
{this.props.children}
- {downloadButton} + ); } diff --git a/src/components/CoverImage.css b/src/components/CoverImage.css index d598dc3..e715de3 100644 --- a/src/components/CoverImage.css +++ b/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; - } - -} \ No newline at end of file diff --git a/src/components/CoverImage.js b/src/components/CoverImage.js index 336dfd4..cdfe411 100644 --- a/src/components/CoverImage.js +++ b/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 ( -
-
-
- -
-
- -
-

{title}

-

{author}

-
-
-
- -
-
- -
+ ); } } diff --git a/src/components/Editor.js b/src/components/Editor.js index 6b63629..e22a492 100644 --- a/src/components/Editor.js +++ b/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 (
-
+
{/*

🛠 Creating cover images for your blogs is now super easy

*/} @@ -76,10 +77,15 @@ class Editor extends React.Component {
Font - this.setState({ font: e.target.value })} + + className=" text-gray-700 text-xl p-2 rounded border"> + + +
diff --git a/src/components/RandomTheme.css b/src/components/RandomTheme.css index 51b54d9..2b68073 100644 --- a/src/components/RandomTheme.css +++ b/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; - -} -.random-btn:active{ + +.shuffle-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; -} -} + diff --git a/src/components/RandomTheme.js b/src/components/RandomTheme.js index e34f14f..1832290 100644 --- a/src/components/RandomTheme.js +++ b/src/components/RandomTheme.js @@ -107,7 +107,7 @@ class RandomTheme extends React.Component { render() { return ( -
+
diff --git a/src/components/Themes/BasicTheme.js b/src/components/Themes/BasicTheme.js new file mode 100644 index 0000000..059b020 --- /dev/null +++ b/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 ( +
+
+
+ +
+
+
+

{title}

+
+
+ +
+ +

- {author}

+ +
+
+
+
+ +
+ ); +} + +export default BasicTheme; \ No newline at end of file