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

feat: add option to change themes

Browse Source
This commit is contained in:
rutik wankhade 2022-04-20 20:03:55 +05:30
parent ef92b7fa56
commit c073e6455c
2 changed files with 65 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/CoverImage.js
View File

@ -2,8 +2,9 @@ import React from "react";
import "./CoverImage.css";
import "../assets/css/patterns.css";
import ModernTheme from "./Themes/ModernTheme";
import BasicTheme from "./Themes/BasicTheme";
class CoverImage extends React.Component {
const CoverImage = (props) => {
// hexToRgbA(hex, opacity) {
// var c;
// if (/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)) {
@ -17,13 +18,18 @@ class CoverImage extends React.Component {
// throw new Error("Bad Hex");
// }
render() {
// const { title, bgColor, pattern, author, icon,font } = this.props;
const { theme } = props;
return (
<ModernTheme config={ this.props}/>
<div>
{theme === 'basic' ? <BasicTheme config={props} /> : <ModernTheme config={props} />}
</div>
);
}
}
export default CoverImage;

39
src/components/Editor.js
View File

@ -14,7 +14,8 @@ const defaultSettings = {
author: 'Rutik Wankhade',
icon: { 'label': 'react', 'value': 'react' },
devIconOptions: {},
font: 'font-sans'
font: 'font-sans',
theme: 'basic'
};
@ -41,14 +42,17 @@ class Editor extends React.Component {
this.setState({ bgColor: theme.bgColor, borderColor: theme.bdColor, pattern: Pattern });
}
render() {
return (
<div className="flex md:flex-row flex-col bg-gray-50 ">
<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> */}
<div className="flex items-center mb-6 ">
<h1 className=" text-gray-800 text-2xl font-bold ">Coverview</h1>
<div className="flex items-center mb-4 ">
<h1 className=" text-gray-800 text-xl font-bold ">Coverview</h1>
<a href="https://github.com/rutikwankhade/CoverView"
target="_blank" rel="noopener noreferrer"
className="ml-auto mr-2 cursor-pointer">
@ -63,7 +67,7 @@ class Editor extends React.Component {
type="text"
value={this.state.title}
placeholder="Enter title here"
className="border text-gray-700 text-xl rounded p-2 h-24"
className="border text-gray-700 text-xl rounded p-2 h-20"
onChange={(e) => this.setState({ title: e.target.value })}
/>
</div>
@ -115,6 +119,7 @@ class Editor extends React.Component {
<div className="flex flex-col m-2 ">
<span className="font-medium">Icon</span>
<Select value={this.state.icon}
@ -124,9 +129,10 @@ class Editor extends React.Component {
/>
</div>
<div className="flex">
<div className="flex flex-col m-2">
<div className="flex flex-col m-2 w-1/2">
<span className="font-medium">Pattern</span>
<select
onChange={(e) => this.setState({ pattern: e.target.value })}
@ -155,18 +161,25 @@ class Editor extends React.Component {
</select>
</div>
<div className="flex flex-col m-2 w-1/2">
<span className="font-medium">Theme</span>
<select
onChange={(e) => this.setState({ theme: e.target.value })}
value={this.state.theme}
className="text-gray-700 text-xl p-2 rounded border">
<option>basic</option>
<option>modern</option>
</select>
</div>
</div>
<span className="text-sm mt-4 text-center text-gray-400">Made with 💖 by <a href="https://rutikwankhade.dev"
target="_blank" rel="noopener noreferrer" className="underline hover:text-green-500">Rutik Wankhade</a></span>
{/* <div className="flex flex-col m-2 ">
<span className="font-medium">Theme</span>
<select className="text-gray-700 text-xl p-2 rounded border">
<option>Basic</option>
<option>Theme 2</option>
<option>Theme 3</option>
</select>
</div> */}