wood/CoverView
1
0
Fork 0
mirror of https://github.com/woodchen-ink/CoverView.git synced 2025-07-18 14:01:56 +08:00
Code Issues Packages Projects Releases Wiki Activity

create cover component and add font option

Browse Source
This commit is contained in:
rutik wankhade 2022-04-16 15:08:46 +05:30
parent b1ef160bcc
commit 412eaa56d2
8 changed files with 61 additions and 177 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
src/components/App.css
View File

@ -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;
}
} */

18
src/components/ComponentToImg.js
View File

@ -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>
);
}

76
src/components/CoverImage.css
View File

@ -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;
}
}

22
src/components/CoverImage.js
View File

@ -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>
<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>
<BasicTheme config={ this.props}/>
);
}
}

16
src/components/Editor.js
View File

@ -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">
<option>Serif</option>
<option>Sans</option>
<option>mono</option>
<select
value={this.state.font}
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 ">

26
src/components/RandomTheme.css
View File

@ -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;
}
}

2
src/components/RandomTheme.js
View File

@ -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" />

34
src/components/Themes/BasicTheme.js Normal file
View File

@ -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;