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 platform option and fix responsiveness

Browse Source
This commit is contained in:
rutik wankhade 2022-06-25 16:23:20 +05:30
parent ea31f4ab37
commit 4abb381d2f
9 changed files with 59 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/App.js
View File

@ -5,7 +5,7 @@ class App extends React.Component {
render() { render() {
return ( return (
<div className="content "> <div className="">
<Editor /> <Editor />
<Info/> <Info/>
</div> </div>

7
src/components/ComponentToImg.js
View File

@ -15,8 +15,11 @@ class ComponentToImg extends React.Component {
<React.Fragment> <React.Fragment>
<div ref={this.componentRef}>{this.props.children}</div> <div ref={this.componentRef}>{this.props.children}</div>
<button <button
className="border p-2 bg-gray-700 hover:bg-gray-800 text-white text-xl rounded m-4 px-4" className="border p-2 bg-gray-700 hover:bg-gray-800 flex items-center text-white text-xl rounded-lg m-4 px-4"
onClick={() => exportComponentAsPNG(this.componentRef, 'cover')}>Download</button> onClick={() => exportComponentAsPNG(this.componentRef, 'cover')}>
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path></svg>
<span className="mx-2">Download</span>
</button>
</React.Fragment> </React.Fragment>
); );
} }

18
src/components/CoverImage.css
View File

@ -1,14 +1,10 @@
.cover { .dev {
display: flex; height: 340px;
height: 420px; width: 860px;
width: 800px;
overflow-y: hidden;
} }
@media screen and (max-width:600px) { .hashnode {
.cover { height: 420px;
width: 90vw; width: 800px;
height: 60vh;
padding: 4vh;
}
} }

2
src/components/CoverImage.js
View File

@ -35,7 +35,7 @@ const CoverImage = (props) => {
return ( return (
<div> <div className="md:w-full md:scale-100 scale-50">
{selectTheme(theme)} </div> {selectTheme(theme)} </div>
); );

54
src/components/Editor.js
View File

@ -13,9 +13,10 @@ const defaultSettings = {
author: 'Rutik Wankhade', author: 'Rutik Wankhade',
icon: { 'label': 'react', 'value': 'react' }, icon: { 'label': 'react', 'value': 'react' },
devIconOptions: {}, devIconOptions: {},
font: 'font-sans', font: 'font-Anek',
theme: 'modern', theme: 'modern',
customIcon: '' customIcon: '',
platform:'hashnode'
}; };
@ -24,6 +25,7 @@ const devIconsUrl = "https://raw.githubusercontent.com/devicons/devicon/master/d
// { value: 'None', label: 'None' }, // { value: 'None', label: 'None' },
// { value: 'javascript', label: 'Javascript' }, // { value: 'javascript', label: 'Javascript' },
// { value: 'python', label: 'Python' }, // { value: 'python', label: 'Python' },
// ]
class Editor extends React.Component { class Editor extends React.Component {
@ -53,22 +55,6 @@ class Editor extends React.Component {
); );
// customOption = props => {
// const { data, innerRef, innerProps } = props;
// return data.name === 'custom' ? (
// <div ref={innerRef} {...innerProps}>
// <input type="file"
// className="text-xl cursor-pointer mb-2 bg-white rounded border"
// onChange={(e) => this.setState({ 'customIcon': URL.createObjectURL(e.target.files[0]) })}
// />
// </div>
// ) : (
// <components.Option {...props} />
// );
// };
render() { render() {
@ -83,7 +69,7 @@ class Editor extends React.Component {
type="text" type="text"
value={this.state.title} value={this.state.title}
placeholder="Enter title here" placeholder="Enter title here"
className="border text-gray-700 text-xl rounded p-2 h-24" className="focus:outline-none border text-gray-700 text-xl rounded p-2 h-24"
onChange={(e) => this.setState({ title: e.target.value })} onChange={(e) => this.setState({ title: e.target.value })}
/> />
</div> </div>
@ -94,7 +80,7 @@ class Editor extends React.Component {
type="text" type="text"
value={this.state.author} value={this.state.author}
placeholder="Author" placeholder="Author"
className="border text-gray-700 text-xl rounded bg-white p-2" className="focus:outline-none border text-gray-700 text-xl rounded bg-white p-2"
onChange={(e) => this.setState({ author: e.target.value })} onChange={(e) => this.setState({ author: e.target.value })}
></input> ></input>
</div> </div>
@ -111,7 +97,7 @@ class Editor extends React.Component {
onChange={(e) => this.setState({ font: e.target.value })} onChange={(e) => this.setState({ font: e.target.value })}
className=" text-gray-700 text-xl p-2 rounded border"> className="focus:outline-none text-gray-700 text-xl p-2 rounded border">
<option>font-serif</option> <option>font-serif</option>
<option>font-sans</option> <option>font-sans</option>
<option>font-mono</option> <option>font-mono</option>
@ -148,14 +134,14 @@ class Editor extends React.Component {
onChange={(selectedOption) => this.setState({ icon: selectedOption })} onChange={(selectedOption) => this.setState({ icon: selectedOption })}
options={this.state.devIconOptions} options={this.state.devIconOptions}
formatOptionLabel={this.formatOptionLabel} formatOptionLabel={this.formatOptionLabel}
className="text-xl text-gray-700" className="outline-none focus:outline-none text-xl text-gray-700"
/> />
</div> </div>
{this.state.icon.label === 'custom' ? {this.state.icon.label === 'custom' ?
<div className="flex items-center justify-center m-2"> <div className="flex items-center justify-center m-2">
<input type="file" <input type="file"
className="text-lg cursor-pointer bg-white rounded border" className="focus:outline-none text-lg cursor-pointer bg-white rounded border"
onChange={(e) => this.setState({ 'customIcon': URL.createObjectURL(e.target.files[0]) })} onChange={(e) => this.setState({ 'customIcon': URL.createObjectURL(e.target.files[0]) })}
/> />
</div> </div>
@ -170,7 +156,7 @@ class Editor extends React.Component {
<span className="font-medium">Pattern</span> <span className="font-medium">Pattern</span>
<select <select
onChange={(e) => this.setState({ pattern: e.target.value })} onChange={(e) => this.setState({ pattern: e.target.value })}
className="border text-xl p-2 rounded" className="focus:outline-none border text-xl p-2 rounded"
value={this.state.pattern}> value={this.state.pattern}>
<option>None</option> <option>None</option>
@ -202,7 +188,7 @@ class Editor extends React.Component {
onChange={(e) => this.setState({ theme: e.target.value })} onChange={(e) => this.setState({ theme: e.target.value })}
value={this.state.theme} value={this.state.theme}
className="text-gray-700 text-xl p-2 rounded border"> className="focus:outline-none text-gray-700 text-xl p-2 rounded border">
<option>basic</option> <option>basic</option>
<option>modern</option> <option>modern</option>
<option>outline</option> <option>outline</option>
@ -214,8 +200,24 @@ class Editor extends React.Component {
</div> </div>
<div className="flex flex-col m-2">
<span className="font-medium">Platform</span>
<select
onChange={(e) => this.setState({ platform: e.target.value })}
value={this.state.platform}
className="focus:outline-none text-gray-700 text-xl p-2 rounded border">
<option>hashnode</option>
<option>dev</option>
</select>
</div>
<span className="text-sm mt-4 text-center text-gray-400">Made with 💖 by <a href="https://rutikwankhade.dev" <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> target="_blank" rel="noopener noreferrer" className="underline hover:text-purple-400">Rutik Wankhade</a></span>

6
src/components/Themes/BasicTheme.js
View File

@ -2,11 +2,11 @@ import React from 'react';
const BasicTheme = ({ config }) => { const BasicTheme = ({ config }) => {
const { title, bgColor, pattern, author, icon, font, customIcon } = config; const { title, bgColor, pattern, author, icon, font, customIcon,platform } = config;
return ( return (
<div className="p-4 bg-white border"> <div className="p-4 bg-white border">
<div className={`cover flex text-gray-800 items-center ${pattern} `} <div className={`overflow-y-hidden flex text-gray-800 items-center ${pattern} ${platform} `}
style={{ backgroundColor: bgColor }} style={{ backgroundColor: bgColor }}
> >
@ -18,7 +18,7 @@ const BasicTheme = ({ config }) => {
</div> </div>
</div> </div>
<div className=" flex mx-4 mt-10 p-4 rounded-xl items-center bg-white"> <div className=" flex mx-4 p-4 rounded-xl items-center bg-white">
{ {
customIcon ? customIcon ?
<div className="w-12 h-12 "> <div className="w-12 h-12 ">

12
src/components/Themes/ModernTheme.js
View File

@ -3,19 +3,19 @@ import React from 'react';
const ModernTheme = ({ config }) => { const ModernTheme = ({ config }) => {
const { title, bgColor, pattern, author, icon, font, customIcon } = config; const { title, bgColor, pattern, author, icon, font, customIcon, platform } = config;
return ( return (
<div className="p-4 bg-white border"> <div className="w-full p-4 bg-white border">
<div className=" cover flex items-center"> <div className=" overflow-y-hidden w-full flex items-center">
<div className={` h-full rounded-xl p-4 text-gray-800 flex items-center ${pattern} `} <div className={` h-full w-full rounded-xl p-4 text-gray-800 flex items-center ${pattern} ${platform}`}
style={{ backgroundColor: bgColor }} style={{ backgroundColor: bgColor }}
> >
{ {
customIcon ? customIcon ?
<div className="w-28 h-28 mx-auto items-center justify-center flex"> <div className=" mx-auto items-center justify-center flex">
<img src={customIcon} alt="img" className="rounded-full bg-white p-1 border-white" /> <img src={customIcon} alt="img" className="w-28 h-28 rounded-full bg-white border-4 border-white" />
</div> </div>
: :
<div className=" rounded-full p-6 w-32 h-32 bg-white mx-auto items-center justify-center flex"> <div className=" rounded-full p-6 w-32 h-32 bg-white mx-auto items-center justify-center flex">

16
src/components/Themes/OutlineTheme.js
View File

@ -1,27 +1,21 @@
import React from 'react'; import React from 'react';
const OutlineTheme = ({ config }) => { const OutlineTheme = ({ config }) => {
const { title, bgColor, pattern, author, icon, font, customIcon } = config; const { title, bgColor, pattern, author, icon, font, customIcon, platform } = config;
return ( return (
<div className="p-4 bg-white border"> <div className="p-4 bg-white border">
<div className={`cover rounded flex flex-col text-gray-800 items-center border-4 border-gray-800 ${pattern} `} <div className={`overflow-y-hidden rounded flex flex-col text-gray-800 items-center border-4 border-gray-800 ${pattern} ${platform} `}
style={{ backgroundColor: bgColor }} style={{ backgroundColor: bgColor }}
> >
<div className={`${font} bg-white rounded-2xl md:w-10/12 m-auto flex flex-col py-12 px-6 `}> <div className={`${font} bg-white rounded-2xl md:w-10/12 m-auto flex flex-col p-12 `}>
<div className="px-12"> <h1 className="text-3xl text-gray-800 md:text-5xl font-bold text-center">{title}</h1>
<div>
<h1 className="text-3xl text-gray-800 md:text-5xl font-bold text-center">{title}</h1>
</div>
</div>
</div> </div>
<div className={`${font} w-full h-16 border-gray-800 border-t-4 flex mt-10 p-2 px-6 items-center bg-white`}> <div className={`${font} w-full h-16 border-gray-800 border-t-4 flex mt-auto mb-0 p-2 px-6 items-center bg-white`}>
{ {
customIcon ? customIcon ?
<div className="w-12 h-12 "> <div className="w-12 h-12 ">

6
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 } = config; const {bgColor, platform } = config;
const [image, setImage] = useState() const [image, setImage] = useState()
@ -9,7 +9,7 @@ const PreviewTheme = ({ config }) => {
<div className="p-4 bg-white border"> <div className="p-4 bg-white border">
<div className={`cover flex flex-col rounded px-4 pt-4 `} <div className={`overflow-y-hidden flex flex-col rounded px-4 pt-4 ${platform}`}
style={{ backgroundColor: bgColor }} style={{ backgroundColor: bgColor }}
> >
@ -30,7 +30,7 @@ const PreviewTheme = ({ config }) => {
className="text-xl cursor-pointer mb-2 bg-white rounded border" className="text-xl cursor-pointer mb-2 bg-white rounded border"
onChange={(e) => setImage(URL.createObjectURL(e.target.files[0]))} onChange={(e) => setImage(URL.createObjectURL(e.target.files[0]))}
/> />
<span className=" text-center italic">Upload a screenshot of your app</span> <span className=" text-center italic">click to upload a screenshot</span>
</div> </div>
} }