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 new outline theme

Browse Source
This commit is contained in:
rutik wankhade 2022-04-20 20:32:36 +05:30
parent c073e6455c
commit b650770d1c
3 changed files with 49 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/components/CoverImage.js
View File

@ -3,6 +3,7 @@ import "./CoverImage.css";
import "../assets/css/patterns.css";
import ModernTheme from "./Themes/ModernTheme";
import BasicTheme from "./Themes/BasicTheme";
import OutlineTheme from "./Themes/OutlineTheme";
const CoverImage = (props) => {
// hexToRgbA(hex, opacity) {
@ -20,11 +21,19 @@ const CoverImage = (props) => {
const { theme } = props;
const selectTheme = (theme) => {
switch (theme) {
case 'basic': return <BasicTheme config={props} />
case 'modern': return <ModernTheme config={props} />
case 'outline': return <OutlineTheme config={props} />
default: return <BasicTheme config={props} />
}
}
return (
<div>
{theme === 'basic' ? <BasicTheme config={props} /> : <ModernTheme config={props} />}
</div>
{selectTheme(theme)} </div>
);

1
src/components/Editor.js
View File

@ -171,6 +171,7 @@ class Editor extends React.Component {
className="text-gray-700 text-xl p-2 rounded border">
<option>basic</option>
<option>modern</option>
<option>outline</option>
</select>
</div>

37
src/components/Themes/OutlineTheme.js Normal file
View File

@ -0,0 +1,37 @@
import React from 'react';
const OutlineTheme = ({ config }) => {
const { title, bgColor, pattern, author, icon, font } = config;
return (
<div className="p-4 bg-white border">
<div className={`cover rounded flex flex-col text-gray-800 items-center border-2 border-gray-800 ${pattern} `}
style={{ backgroundColor: bgColor }}
>
<div className={`${font} bg-white rounded md:w-10/12 border-2 border-gray-800 m-auto flex flex-col py-12 px-6 `}>
<div className="px-12">
<div>
<h1 className="text-3xl md:text-5xl font-bold text-center">{title}</h1>
</div>
</div>
</div>
<div className="w-full border-gray-800 border-t-2 flex mt-10 p-2 px-6 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>
);
}
export default OutlineTheme;