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 choose mobile theme

Browse Source
This commit is contained in:
rutik wankhade 2023-01-26 11:52:29 +05:30
parent 036f788eeb
commit 2045e3783a
4 changed files with 22 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/images/theme6.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

25
src/components/Editor.js
View File

@ -12,6 +12,7 @@ import theme2 from '../assets/images/theme2.webp'
import theme3 from '../assets/images/theme3.webp' import theme3 from '../assets/images/theme3.webp'
import theme4 from '../assets/images/theme4.webp' import theme4 from '../assets/images/theme4.webp'
import theme5 from '../assets/images/theme5.webp' import theme5 from '../assets/images/theme5.webp'
import theme6 from '../assets/images/theme6.webp'
@ -24,7 +25,7 @@ const defaultSettings = {
icon: { 'label': 'react', 'value': 'react' }, icon: { 'label': 'react', 'value': 'react' },
devIconOptions: {}, devIconOptions: {},
font: 'font-Anek', font: 'font-Anek',
theme: 'mobile', theme: 'stylish',
customIcon: '', customIcon: '',
platform: 'hashnode' platform: 'hashnode'
@ -237,23 +238,29 @@ class Editor extends React.Component {
<img src={theme1} alt="basic theme" <img src={theme1} alt="basic theme"
onClick={(e) => this.setState({ theme: "basic" })} onClick={(e) => this.setState({ theme: "basic" })}
className="opacity-60 cursor-pointer border-gray-100 hover:scale-105 duration-300 hover:border-gray-200 border m-2 " className=" cursor-pointer border-gray-100 hover:scale-105 duration-300 hover:border-gray-200 border m-2 "
/> />
<img src={theme2} alt="basic theme" <img src={theme2} alt="basic theme"
onClick={(e) => this.setState({ theme: "modern" })} onClick={(e) => this.setState({ theme: "modern" })}
className="opacity-60 cursor-pointer border-gray-100 hover:scale-105 hover:border-gray-200 duration-300 border m-2 " className="cursor-pointer border-gray-100 hover:scale-105 hover:border-gray-200 duration-300 border m-2 "
/> />
<img src={theme3} alt="basic theme" <img src={theme3} alt="basic theme"
onClick={(e) => this.setState({ theme: "stylish" })} onClick={(e) => this.setState({ theme: "stylish" })}
className="opacity-60 cursor-pointer border border-gray-100 hover:border-gray-200 hover:scale-105 duration-300 m-2" className=" cursor-pointer border border-gray-100 hover:border-gray-200 hover:scale-105 duration-300 m-2"
/>
<img src={theme4} alt="basic theme"
onClick={(e) => this.setState({ theme: "preview" })}
className="opacity-60 cursor-pointer border border-gray-100 hover:border-gray-200 hover:scale-105 duration-300 m-2"
/> />
<img src={theme5} alt="basic theme" <img src={theme5} alt="basic theme"
onClick={(e) => this.setState({ theme: "outline" })} onClick={(e) => this.setState({ theme: "outline" })}
className="opacity-60 cursor-pointer border border-gray-100 hover:border-gray-200 hover:scale-105 duration-300 m-2" className=" cursor-pointer border border-gray-100 hover:border-gray-200 hover:scale-105 duration-300 m-2"
/>
<img src={theme4} alt="basic theme"
onClick={(e) => this.setState({ theme: "preview" })}
className=" cursor-pointer border border-gray-100 hover:border-gray-200 hover:scale-105 duration-300 m-2"
/>
<img src={theme6} alt="basic theme"
onClick={(e) => this.setState({ theme: "mobile" })}
className=" cursor-pointer border border-gray-100 hover:border-gray-200 hover:scale-105 duration-300 m-2"
/> />
</div> </div>

4
src/components/Themes/MobileMockupTheme.js
View File

@ -1,7 +1,7 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
const MobileMockupTheme = ({ config }) => { const MobileMockupTheme = ({ config }) => {
const { bgColor, platform, title } = config; const { bgColor, platform, title,font } = config;
const [image, setImage] = useState() const [image, setImage] = useState()
@ -14,7 +14,7 @@ const MobileMockupTheme = ({ config }) => {
> >
<h1 className="text-2xl w-1/2 md:text-4xl px-4 text-white font-bold text-left">{title}</h1> <h1 className={`${font} text-2xl w-1/2 md:text-4xl px-4 text-white font-bold text-left`}>{title}</h1>
<div className="w-5/12 mx-auto m-4 mt-10 group mx-auto h-full shadow-lg flex flex-col bg-white border-t-8 border-x-8 border-gray-800 rounded-t-3xl border-white"> <div className="w-5/12 mx-auto m-4 mt-10 group mx-auto h-full shadow-lg flex flex-col bg-white border-t-8 border-x-8 border-gray-800 rounded-t-3xl border-white">
<div className="bg-gray-800 h-8 w-full p-2 pb-3 flex items-center rounded-t"> <div className="bg-gray-800 h-8 w-full p-2 pb-3 flex items-center rounded-t">

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

@ -1,7 +1,7 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
const PreviewTheme = ({ config }) => { const PreviewTheme = ({ config }) => {
const { bgColor, platform,title } = config; const { bgColor, platform, title, font } = config;
const [image, setImage] = useState() const [image, setImage] = useState()
@ -14,7 +14,7 @@ const PreviewTheme = ({ config }) => {
> >
<h1 className="text-2xl md:text-3xl p-10 text-white font-bold text-center">{title}</h1> <h1 className={`${font} text-2xl md:text-3xl p-10 text-white font-bold text-center`}>{title}</h1>
<div className="w-10/12 group mx-auto mt-auto mb-0 shadow-lg flex flex-col bg-white rounded-t-xl border-white"> <div className="w-10/12 group mx-auto mt-auto mb-0 shadow-lg flex flex-col bg-white rounded-t-xl border-white">
<div className="bg-gray-800 h-8 w-full p-2 flex items-center rounded-t-xl"> <div className="bg-gray-800 h-8 w-full p-2 flex items-center rounded-t-xl">