mirror of
https://github.com/woodchen-ink/CoverView.git
synced 2025-07-18 14:01:56 +08:00
feat: add platform option and fix responsiveness
This commit is contained in:
rutik wankhade
parent
ea31f4ab37
commit
4abb381d2f
@ -5,7 +5,7 @@ class App extends React.Component {
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className="content ">
|
||||
<div className="">
|
||||
<Editor />
|
||||
<Info/>
|
||||
</div>
|
||||
|
||||
@ -15,8 +15,11 @@ class ComponentToImg extends React.Component {
|
||||
<React.Fragment>
|
||||
<div ref={this.componentRef}>{this.props.children}</div>
|
||||
<button
|
||||
className="border p-2 bg-gray-700 hover:bg-gray-800 text-white text-xl rounded m-4 px-4"
|
||||
onClick={() => exportComponentAsPNG(this.componentRef, 'cover')}>Download</button>
|
||||
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')}>
|
||||
<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>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,14 +1,10 @@
|
||||
.cover {
|
||||
display: flex;
|
||||
height: 420px;
|
||||
width: 800px;
|
||||
overflow-y: hidden;
|
||||
.dev {
|
||||
height: 340px;
|
||||
width: 860px;
|
||||
}
|
||||
|
||||
@media screen and (max-width:600px) {
|
||||
.cover {
|
||||
width: 90vw;
|
||||
height: 60vh;
|
||||
padding: 4vh;
|
||||
}
|
||||
.hashnode {
|
||||
height: 420px;
|
||||
width: 800px;
|
||||
|
||||
}
|
||||
@ -35,7 +35,7 @@ const CoverImage = (props) => {
|
||||
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="md:w-full md:scale-100 scale-50">
|
||||
{selectTheme(theme)} </div>
|
||||
);
|
||||
|
||||
|
||||
@ -13,9 +13,10 @@ const defaultSettings = {
|
||||
author: 'Rutik Wankhade',
|
||||
icon: { 'label': 'react', 'value': 'react' },
|
||||
devIconOptions: {},
|
||||
font: 'font-sans',
|
||||
font: 'font-Anek',
|
||||
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: 'javascript', label: 'Javascript' },
|
||||
// { value: 'python', label: 'Python' },
|
||||
// ]
|
||||
|
||||
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() {
|
||||
@ -83,7 +69,7 @@ class Editor extends React.Component {
|
||||
type="text"
|
||||
value={this.state.title}
|
||||
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 })}
|
||||
/>
|
||||
</div>
|
||||
@ -94,7 +80,7 @@ class Editor extends React.Component {
|
||||
type="text"
|
||||
value={this.state.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 })}
|
||||
></input>
|
||||
</div>
|
||||
@ -111,7 +97,7 @@ class Editor extends React.Component {
|
||||
|
||||
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-sans</option>
|
||||
<option>font-mono</option>
|
||||
@ -148,14 +134,14 @@ class Editor extends React.Component {
|
||||
onChange={(selectedOption) => this.setState({ icon: selectedOption })}
|
||||
options={this.state.devIconOptions}
|
||||
formatOptionLabel={this.formatOptionLabel}
|
||||
className="text-xl text-gray-700"
|
||||
className="outline-none focus:outline-none text-xl text-gray-700"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{this.state.icon.label === 'custom' ?
|
||||
<div className="flex items-center justify-center m-2">
|
||||
<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]) })}
|
||||
/>
|
||||
</div>
|
||||
@ -170,7 +156,7 @@ class Editor extends React.Component {
|
||||
<span className="font-medium">Pattern</span>
|
||||
<select
|
||||
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}>
|
||||
|
||||
<option>None</option>
|
||||
@ -202,7 +188,7 @@ class Editor extends React.Component {
|
||||
onChange={(e) => this.setState({ theme: e.target.value })}
|
||||
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>modern</option>
|
||||
<option>outline</option>
|
||||
@ -214,8 +200,24 @@ class Editor extends React.Component {
|
||||
</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"
|
||||
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>
|
||||
|
||||
|
||||
|
||||
|
||||
@ -2,11 +2,11 @@ import React from 'react';
|
||||
|
||||
|
||||
const BasicTheme = ({ config }) => {
|
||||
const { title, bgColor, pattern, author, icon, font, customIcon } = config;
|
||||
const { title, bgColor, pattern, author, icon, font, customIcon,platform } = config;
|
||||
|
||||
return (
|
||||
<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 }}
|
||||
>
|
||||
|
||||
@ -18,7 +18,7 @@ const BasicTheme = ({ config }) => {
|
||||
</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 ?
|
||||
<div className="w-12 h-12 ">
|
||||
|
||||
@ -3,19 +3,19 @@ import React from 'react';
|
||||
|
||||
const ModernTheme = ({ config }) => {
|
||||
|
||||
const { title, bgColor, pattern, author, icon, font, customIcon } = config;
|
||||
const { title, bgColor, pattern, author, icon, font, customIcon, platform } = 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} `}
|
||||
<div className="w-full p-4 bg-white border">
|
||||
<div className=" overflow-y-hidden w-full flex items-center">
|
||||
<div className={` h-full w-full rounded-xl p-4 text-gray-800 flex items-center ${pattern} ${platform}`}
|
||||
style={{ backgroundColor: bgColor }}
|
||||
>
|
||||
|
||||
{
|
||||
customIcon ?
|
||||
<div className="w-28 h-28 mx-auto items-center justify-center flex">
|
||||
<img src={customIcon} alt="img" className="rounded-full bg-white p-1 border-white" />
|
||||
<div className=" mx-auto items-center justify-center flex">
|
||||
<img src={customIcon} alt="img" className="w-28 h-28 rounded-full bg-white border-4 border-white" />
|
||||
</div>
|
||||
:
|
||||
<div className=" rounded-full p-6 w-32 h-32 bg-white mx-auto items-center justify-center flex">
|
||||
|
||||
@ -1,27 +1,21 @@
|
||||
import React from 'react';
|
||||
const OutlineTheme = ({ config }) => {
|
||||
const { title, bgColor, pattern, author, icon, font, customIcon } = config;
|
||||
const { title, bgColor, pattern, author, icon, font, customIcon, platform } = config;
|
||||
|
||||
return (
|
||||
<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 }}
|
||||
>
|
||||
|
||||
|
||||
<div className={`${font} bg-white rounded-2xl md:w-10/12 m-auto flex flex-col py-12 px-6 `}>
|
||||
<div className="px-12">
|
||||
<div>
|
||||
<h1 className="text-3xl text-gray-800 md:text-5xl font-bold text-center">{title}</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div className={`${font} bg-white rounded-2xl md:w-10/12 m-auto flex flex-col p-12 `}>
|
||||
<h1 className="text-3xl text-gray-800 md:text-5xl font-bold text-center">{title}</h1>
|
||||
</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 ?
|
||||
<div className="w-12 h-12 ">
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import React, { useState } from 'react';
|
||||
|
||||
const PreviewTheme = ({ config }) => {
|
||||
const {bgColor } = config;
|
||||
const {bgColor, platform } = config;
|
||||
|
||||
const [image, setImage] = useState()
|
||||
|
||||
@ -9,7 +9,7 @@ const PreviewTheme = ({ config }) => {
|
||||
<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 }}
|
||||
>
|
||||
|
||||
@ -30,7 +30,7 @@ const PreviewTheme = ({ config }) => {
|
||||
className="text-xl cursor-pointer mb-2 bg-white rounded border"
|
||||
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>
|
||||
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user