From d065e08e809997566319d58862384f9df7e9816c Mon Sep 17 00:00:00 2001
From: rutik wankhade <rutikwankhade2@gmail.com>
Date: Wed, 25 Jan 2023 11:25:23 +0530
Subject: [PATCH] change layout of editor

---
 src/components/Editor.js | 334 +++++++++++++++++++++++----------------
 src/components/Header.js |   2 +-
 src/index.css            |   7 +-
 3 files changed, 203 insertions(+), 140 deletions(-)

diff --git a/src/components/Editor.js b/src/components/Editor.js
index 6ab69cb..ce02527 100644
--- a/src/components/Editor.js
+++ b/src/components/Editor.js
@@ -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>
diff --git a/src/components/Header.js b/src/components/Header.js
index b01892d..4dc5b21 100644
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -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>
diff --git a/src/index.css b/src/index.css
index d784381..029129b 100644
--- a/src/index.css
+++ b/src/index.css
@@ -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');
\ No newline at end of file
+@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@600;700;800&display=swap');
+
+
+.h-100{
+    height:36rem;
+}
\ No newline at end of file