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 theme

Browse Source
This commit is contained in:
rutik wankhade 2022-04-20 19:31:00 +05:30
parent 43655688e8
commit ef92b7fa56
3 changed files with 34 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/CoverImage.css
View File

@ -1,5 +1,4 @@
.cover {
background-color: #00ff99;
display: flex;
height: 420px;
width: 800px;

4
src/components/CoverImage.js
View File

@ -1,7 +1,7 @@
import React from "react";
import "./CoverImage.css";
import "../assets/css/patterns.css";
import BasicTheme from "./Themes/BasicTheme";
import ModernTheme from "./Themes/ModernTheme";
class CoverImage extends React.Component {
// hexToRgbA(hex, opacity) {
@ -21,7 +21,7 @@ class CoverImage extends React.Component {
// const { title, bgColor, pattern, author, icon,font } = this.props;
return (
<BasicTheme config={ this.props}/>
<ModernTheme config={ this.props}/>
);
}
}

32
src/components/Themes/ModernTheme.js Normal file
View File

@ -0,0 +1,32 @@
import React from 'react';
const ModernTheme = ({ config }) => {
const { title, bgColor, pattern, author, icon, font } = config;
return (
<div className="p-4 bg-white border">
<div className=" cover flex items-center">
<div className={` h-full rounded-xl p-4 text-gray-800 flex items-center ${pattern} `}
style={{ backgroundColor: bgColor }}
>
<div className=" rounded-full p-6 w-32 h-32 bg-white mx-auto items-center justify-center flex">
<i className={`devicon-${icon.value}-plain p-4 dev-icon text-7xl`}></i>
</div>
<div className="h-full w-2/3">
<div className={`${font} bg-white px-12 justify-center text-left rounded-xl h-full p-4 flex flex-col`}>
<h1 className="text-3xl md:text-5xl font-bold ">{title}</h1>
<h2 className="text-xl mt-10 font-semibold text-left "> - {author}</h2>
</div>
</div>
</div>
</div>
</div>
);
}
export default ModernTheme;