mirror of
https://github.com/woodchen-ink/CoverView.git
synced 2025-07-18 05:51:56 +08:00
change layout of editor
This commit is contained in:
rutik wankhade
parent
41fe70b246
commit
d065e08e80
@ -3,9 +3,10 @@ import CoverImage from "./CoverImage";
|
||||
import ComponentToImg from "./ComponentToImg";
|
||||
import Select from 'react-select';
|
||||
import RandomTheme from './RandomTheme';
|
||||
// import resetIcon from '../assets/icons/reset.svg'
|
||||
import resetIcon from '../assets/icons/reset.svg'
|
||||
import { ImgProvider } from '../utils/ImgContext'
|
||||
import Header from "./Header";
|
||||
import { Tab } from '@headlessui/react'
|
||||
|
||||
const defaultSettings = {
|
||||
title: "How I built my first project with react",
|
||||
@ -68,166 +69,223 @@ class Editor extends React.Component {
|
||||
|
||||
<ImgProvider>
|
||||
|
||||
|
||||
<div className="flex md:flex-row flex-col bg-gray-50 ">
|
||||
|
||||
<div className="bg-white m-2 rounded-xl shadow-sm p-4 flex flex-col md:w-1/4">
|
||||
<div className="bg-white flex flex-col h-100 border w-4/12">
|
||||
|
||||
<Tab.Group>
|
||||
<div className="flex">
|
||||
|
||||
|
||||
<div className="m-2 flex flex-col">
|
||||
<span className="font-medium">Blog Title</span>
|
||||
<textarea
|
||||
type="text"
|
||||
value={this.state.title}
|
||||
placeholder="Enter title here"
|
||||
className="focus:outline-none border text-gray-700 text-xl rounded p-2 h-24"
|
||||
onChange={(e) => this.setState({ title: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
<Tab.List className=" bg-white p-2 flex flex-col">
|
||||
<Tab className="flex items-center font-semibold ">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" className="text-gray-800 w-12 my-2 h-12 p-2 rounded border" width="24" height="24" viewBox="0 0 24 24" ><path d="M19.045 7.401c.378-.378.586-.88.586-1.414s-.208-1.036-.586-1.414l-1.586-1.586c-.378-.378-.88-.586-1.414-.586s-1.036.208-1.413.585L4 13.585V18h4.413L19.045 7.401zm-3-3 1.587 1.585-1.59 1.584-1.586-1.585 1.589-1.584zM6 16v-1.585l7.04-7.018 1.586 1.586L7.587 16H6zm-2 4h16v2H4z"></path></svg>
|
||||
</Tab>
|
||||
|
||||
<div className="flex flex-col m-2 ">
|
||||
<span className="font-medium">Author</span>
|
||||
<input
|
||||
type="text"
|
||||
value={this.state.author}
|
||||
placeholder="Author"
|
||||
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>
|
||||
<Tab className="flex items-center font-semibold text-lg">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" className=" text-gray-800 w-12 h-12 p-2 my-2 rounded border" width="24" height="24" viewBox="0 0 24 24" ><path d="M11.024 11.536 10 10l-2 3h9l-3.5-5z"></path><circle cx="9.503" cy="7.497" r="1.503"></circle><path d="M19 2H6c-1.206 0-3 .799-3 3v14c0 2.201 1.794 3 3 3h15v-2H6.012C5.55 19.988 5 19.806 5 19s.55-.988 1.012-1H21V4c0-1.103-.897-2-2-2zm0 14H5V5c0-.806.55-.988 1-1h13v12z"></path></svg>
|
||||
</Tab>
|
||||
</Tab.List>
|
||||
|
||||
|
||||
<Tab.Panels className="bg-white border-l ">
|
||||
<Tab.Panel>
|
||||
|
||||
<div className="m-2 flex flex-col">
|
||||
<span className="font-medium">Blog Title</span>
|
||||
<textarea
|
||||
type="text"
|
||||
value={this.state.title}
|
||||
placeholder="Enter title here"
|
||||
className="focus:outline-none border text-gray-700 text-xl rounded p-2 h-24"
|
||||
onChange={(e) => this.setState({ title: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col m-2 ">
|
||||
<span className="font-medium">Author</span>
|
||||
<input
|
||||
type="text"
|
||||
value={this.state.author}
|
||||
placeholder="Author"
|
||||
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>
|
||||
|
||||
<div className="flex flex-col m-2 ">
|
||||
<span className="font-medium">Icon</span>
|
||||
<Select value={this.state.icon}
|
||||
onChange={(selectedOption) => this.setState({ icon: selectedOption })}
|
||||
options={this.state.devIconOptions}
|
||||
formatOptionLabel={this.formatOptionLabel}
|
||||
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="focus:outline-none text-lg cursor-pointer bg-white rounded border"
|
||||
onChange={(e) => this.setState({ 'customIcon': URL.createObjectURL(e.target.files[0]) })}
|
||||
/>
|
||||
</div>
|
||||
:
|
||||
<div></div>
|
||||
}
|
||||
|
||||
<div className="flex items-center">
|
||||
|
||||
<div className="flex flex-col m-2 w-1/2">
|
||||
<span className="font-medium">Font</span>
|
||||
|
||||
<select
|
||||
value={this.state.font}
|
||||
|
||||
onChange={(e) => this.setState({ font: e.target.value })}
|
||||
|
||||
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>
|
||||
<option>font-Inter</option>
|
||||
<option>font-Poppins</option>
|
||||
<option>font-Anek</option>
|
||||
<option>font-Nunito</option>
|
||||
|
||||
|
||||
</select>
|
||||
</div>
|
||||
<div className="flex flex-col m-2 ">
|
||||
<span className="font-medium">Color</span>
|
||||
<div className="border rounded flex items-center p-2">
|
||||
|
||||
<span className="text-sm text-gray-700 font-semibold mx-2">{this.state.bgColor}</span>
|
||||
<input type="color" value={this.state.bgColor}
|
||||
onChange={(e) => this.setState({ bgColor: e.target.value })}
|
||||
className="h-8 w-8 rounded"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div className="flex items-center">
|
||||
<div className="flex flex-col m-2 w-1/2">
|
||||
<span className="font-medium">Pattern</span>
|
||||
<select
|
||||
onChange={(e) => this.setState({ pattern: e.target.value })}
|
||||
className="focus:outline-none border text-xl p-2 rounded"
|
||||
value={this.state.pattern}>
|
||||
|
||||
<option>none</option>
|
||||
<option>graph-paper</option>
|
||||
<option>jigsaw</option>
|
||||
<option>hideout</option>
|
||||
<option>dots</option>
|
||||
<option>falling-triangles</option>
|
||||
<option>circuit-board</option>
|
||||
<option>temple</option>
|
||||
<option>anchors</option>
|
||||
<option>brickwall</option>
|
||||
<option>overlapping-circles</option>
|
||||
<option>wiggle</option>
|
||||
<option>tic-tac-toe</option>
|
||||
<option>leaf</option>
|
||||
<option>bubbles</option>
|
||||
<option>squares</option>
|
||||
<option>explorer</option>
|
||||
<option>jupiter</option>
|
||||
<option>sun</option>
|
||||
</select>
|
||||
</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>
|
||||
|
||||
</div>
|
||||
|
||||
<button
|
||||
className="flex items-center bg-gray-700 text-white rounded-lg mt-6 text-lg font-semibold p-1 px-4 mx-auto border"
|
||||
onClick={this.handleReset}>
|
||||
<span>Reset All</span>
|
||||
</button>
|
||||
|
||||
|
||||
|
||||
<div className="flex items-center">
|
||||
|
||||
<div className="flex flex-col m-2 w-1/2">
|
||||
<span className="font-medium">Font</span>
|
||||
|
||||
<select
|
||||
value={this.state.font}
|
||||
|
||||
onChange={(e) => this.setState({ font: e.target.value })}
|
||||
|
||||
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>
|
||||
<option>font-Inter</option>
|
||||
<option>font-Poppins</option>
|
||||
<option>font-Anek</option>
|
||||
<option>font-Nunito</option>
|
||||
</Tab.Panel>
|
||||
|
||||
|
||||
</select>
|
||||
|
||||
|
||||
<Tab.Panel>
|
||||
themes
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div className="flex flex-col m-2 w-1/2">
|
||||
<span className="font-medium">Theme</span>
|
||||
|
||||
<select
|
||||
onChange={(e) => this.setState({ theme: e.target.value })}
|
||||
value={this.state.theme}
|
||||
|
||||
className="focus:outline-none text-gray-700 text-xl p-2 rounded border">
|
||||
<option>stylish</option>
|
||||
<option>modern</option>
|
||||
<option>basic</option>
|
||||
<option>preview</option>
|
||||
<option>outline</option>
|
||||
|
||||
|
||||
|
||||
</select>
|
||||
</div>
|
||||
</Tab.Panel>
|
||||
</Tab.Panels>
|
||||
|
||||
</div>
|
||||
<div className="flex flex-col m-2 ">
|
||||
<span className="font-medium">Color</span>
|
||||
<div className="border rounded flex items-center p-2">
|
||||
|
||||
<span className="text-sm text-gray-700 font-semibold mx-2">{this.state.bgColor}</span>
|
||||
<input type="color" value={this.state.bgColor}
|
||||
onChange={(e) => this.setState({ bgColor: e.target.value })}
|
||||
className="h-8 w-8 rounded"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</Tab.Group>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div className="flex flex-col m-2 ">
|
||||
<span className="font-medium">Icon</span>
|
||||
<Select value={this.state.icon}
|
||||
onChange={(selectedOption) => this.setState({ icon: selectedOption })}
|
||||
options={this.state.devIconOptions}
|
||||
formatOptionLabel={this.formatOptionLabel}
|
||||
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="focus:outline-none text-lg cursor-pointer bg-white rounded border"
|
||||
onChange={(e) => this.setState({ 'customIcon': URL.createObjectURL(e.target.files[0]) })}
|
||||
/>
|
||||
</div>
|
||||
:
|
||||
<div></div>
|
||||
}
|
||||
|
||||
<div className="flex">
|
||||
|
||||
|
||||
<div className="flex flex-col m-2 w-1/2">
|
||||
<span className="font-medium">Pattern</span>
|
||||
<select
|
||||
onChange={(e) => this.setState({ pattern: e.target.value })}
|
||||
className="focus:outline-none border text-xl p-2 rounded"
|
||||
value={this.state.pattern}>
|
||||
|
||||
<option>none</option>
|
||||
<option>graph-paper</option>
|
||||
<option>jigsaw</option>
|
||||
<option>hideout</option>
|
||||
<option>dots</option>
|
||||
<option>falling-triangles</option>
|
||||
<option>circuit-board</option>
|
||||
<option>temple</option>
|
||||
<option>anchors</option>
|
||||
<option>brickwall</option>
|
||||
<option>overlapping-circles</option>
|
||||
<option>wiggle</option>
|
||||
<option>tic-tac-toe</option>
|
||||
<option>leaf</option>
|
||||
<option>bubbles</option>
|
||||
<option>squares</option>
|
||||
<option>explorer</option>
|
||||
<option>jupiter</option>
|
||||
<option>sun</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col m-2 w-1/2">
|
||||
<span className="font-medium">Theme</span>
|
||||
|
||||
<select
|
||||
onChange={(e) => this.setState({ theme: e.target.value })}
|
||||
value={this.state.theme}
|
||||
|
||||
className="focus:outline-none text-gray-700 text-xl p-2 rounded border">
|
||||
<option>stylish</option>
|
||||
<option>modern</option>
|
||||
<option>basic</option>
|
||||
<option>preview</option>
|
||||
<option>outline</option>
|
||||
|
||||
|
||||
|
||||
</select>
|
||||
</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>
|
||||
|
||||
|
||||
|
||||
@ -249,19 +307,19 @@ class Editor extends React.Component {
|
||||
|
||||
</div>
|
||||
|
||||
<div className="m-2 items-center justify-center flex flex-col">
|
||||
{/* <div className="m-2 items-center justify-center flex flex-col">
|
||||
<RandomTheme onThemeChange={this.getRandomTheme} />
|
||||
{/* <button
|
||||
<button
|
||||
className="flex items-center mx-auto border"
|
||||
onClick={this.handleReset}>
|
||||
<img src={resetIcon} className="shuffle-btn border bg-white p-2 rounded cursor-pointer"/>
|
||||
</button> */}
|
||||
</div>
|
||||
</button>
|
||||
</div> */}
|
||||
|
||||
<div className="flex m-6 flex-col items-center justify-center ">
|
||||
|
||||
<div className="flex flex-col items-center justify-center ">
|
||||
|
||||
|
||||
|
||||
<ComponentToImg downloadAs={this.state.download}>
|
||||
<CoverImage {...this.state} />
|
||||
</ComponentToImg>
|
||||
|
||||
@ -7,7 +7,7 @@ const Header = () => {
|
||||
|
||||
return (
|
||||
|
||||
<div className="text-xl bg-white flex border-b border-gray-100 p-2">
|
||||
<div className="text-xl md:px-2 flex border-b border-gray-100 p-2">
|
||||
<Link to="/" className="flex items-center">
|
||||
<img src={logo} alt="logo" className="w-8 h-8 mx-4" />
|
||||
<h1 className="font-semibold">Coverview</h1>
|
||||
|
||||
@ -6,4 +6,9 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');
|
||||
|
||||
@import url('https://fonts.googleapis.com/css2?family=Anek+Latin:wght@400;500;600;700&display=swap');
|
||||
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@600;700;800&display=swap');
|
||||
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@600;700;800&display=swap');
|
||||
|
||||
|
||||
.h-100{
|
||||
height:36rem;
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user