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

change layout of editor

Browse Source
This commit is contained in:
rutik wankhade 2023-01-25 11:25:23 +05:30
parent 41fe70b246
commit d065e08e80
3 changed files with 203 additions and 140 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

334
src/components/Editor.js
View File

@ -3,9 +3,10 @@ import CoverImage from "./CoverImage";
import ComponentToImg from "./ComponentToImg"; import ComponentToImg from "./ComponentToImg";
import Select from 'react-select'; import Select from 'react-select';
import RandomTheme from './RandomTheme'; import RandomTheme from './RandomTheme';
// import resetIcon from '../assets/icons/reset.svg' import resetIcon from '../assets/icons/reset.svg'
import { ImgProvider } from '../utils/ImgContext' import { ImgProvider } from '../utils/ImgContext'
import Header from "./Header"; import Header from "./Header";
import { Tab } from '@headlessui/react'
const defaultSettings = { const defaultSettings = {
title: "How I built my first project with react", title: "How I built my first project with react",
@ -68,166 +69,223 @@ class Editor extends React.Component {
<ImgProvider> <ImgProvider>
<div className="flex md:flex-row flex-col bg-gray-50 "> <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"> <Tab.List className=" bg-white p-2 flex flex-col">
<span className="font-medium">Blog Title</span> <Tab className="flex items-center font-semibold ">
<textarea <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>
type="text" </Tab>
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 "> <Tab className="flex items-center font-semibold text-lg">
<span className="font-medium">Author</span> <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>
<input </Tab>
type="text" </Tab.List>
value={this.state.author}
placeholder="Author"
className="focus:outline-none border text-gray-700 text-xl rounded bg-white p-2" <Tab.Panels className="bg-white border-l ">
onChange={(e) => this.setState({ author: e.target.value })} <Tab.Panel>
></input>
</div> <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"> </Tab.Panel>
<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>
<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>
<div className="flex flex-col m-2 "> </Tab.Group>
<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 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">
<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>
<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>
<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} /> <RandomTheme onThemeChange={this.getRandomTheme} />
{/* <button <button
className="flex items-center mx-auto border" className="flex items-center mx-auto border"
onClick={this.handleReset}> onClick={this.handleReset}>
<img src={resetIcon} className="shuffle-btn border bg-white p-2 rounded cursor-pointer"/> <img src={resetIcon} className="shuffle-btn border bg-white p-2 rounded cursor-pointer"/>
</button> */} </button>
</div> </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}> <ComponentToImg downloadAs={this.state.download}>
<CoverImage {...this.state} /> <CoverImage {...this.state} />
</ComponentToImg> </ComponentToImg>

2
src/components/Header.js
View File

@ -7,7 +7,7 @@ const Header = () => {
return ( 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"> <Link to="/" className="flex items-center">
<img src={logo} alt="logo" className="w-8 h-8 mx-4" /> <img src={logo} alt="logo" className="w-8 h-8 mx-4" />
<h1 className="font-semibold">Coverview</h1> <h1 className="font-semibold">Coverview</h1>

7
src/index.css
View File

@ -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=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=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;
}