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

feat: added new browser preview theme

Browse Source
This commit is contained in:
rutik wankhade 2022-04-21 23:43:36 +05:30
parent d3f74251e7
commit 1ac04e68ae
3 changed files with 54 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/CoverImage.js
View File

@ -4,6 +4,7 @@ import "../assets/css/patterns.css";
import ModernTheme from "./Themes/ModernTheme";
import BasicTheme from "./Themes/BasicTheme";
import OutlineTheme from "./Themes/OutlineTheme";
import PreviewTheme from "./Themes/PreviewTheme";
const CoverImage = (props) => {
// hexToRgbA(hex, opacity) {
@ -26,6 +27,8 @@ const CoverImage = (props) => {
case 'basic': return <BasicTheme config={props} />
case 'modern': return <ModernTheme config={props} />
case 'outline': return <OutlineTheme config={props} />
case 'preview': return <PreviewTheme config={props} />
default: return <BasicTheme config={props} />
}
}

2
src/components/Editor.js
View File

@ -171,6 +171,8 @@ class Editor extends React.Component {
<option>basic</option>
<option>modern</option>
<option>outline</option>
<option>preview</option>
</select>
</div>

49
src/components/Themes/PreviewTheme.js
View File

@ -0,0 +1,49 @@
import React, { useState } from 'react';
const PreviewTheme = ({ config }) => {
const {bgColor } = config;
const [image, setImage] = useState()
return (
<div className="p-4 bg-white border">
<div className={`cover flex flex-col rounded px-4 pt-4 `}
style={{ backgroundColor: bgColor }}
>
<div className="w-10/12 mx-auto mt-auto mb-0 border-4 rounded-t-xl border-white">
<div className="bg-gray-800 w-full p-3 flex rounded-t-xl">
<div className="bg-red-400 h-4 w-4 rounded-full mx-2"></div>
<div className="bg-yellow-400 h-4 w-4 rounded-full mx-2"></div>
<div className="bg-green-400 h-4 w-4 rounded-full mx-2"></div>
</div>
{image ?
<div>
<img src={image && image} className="object-cover " alt="preview" />
</div>
:
<div className="flex p-20 py-32 bg-white items-center justify-center">
<input type="file"
className="text-xl bg-white"
onChange={(e) => setImage(URL.createObjectURL(e.target.files[0]))}
/>
</div>
}
</div>
</div>
</div>
);
}
export default PreviewTheme;