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

feat: update edit section fonts an ui

Browse Source
This commit is contained in:
Rutik Wankhade 2024-10-06 17:36:21 +05:30
parent bb15e01b6c
commit 477a64c1be
1 changed files with 26 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
src/components/Editor.js
View File

@ -5,7 +5,6 @@ import Select from 'react-select';
import RandomTheme from './RandomTheme'; import RandomTheme from './RandomTheme';
import { ImgProvider } from '../utils/ImgContext' import { ImgProvider } from '../utils/ImgContext'
import Header from "./Header"; import Header from "./Header";
import { Tab } from '@headlessui/react'
import theme1 from '../assets/images/theme1.webp' import theme1 from '../assets/images/theme1.webp'
import theme2 from '../assets/images/theme2.webp' import theme2 from '../assets/images/theme2.webp'
@ -16,12 +15,10 @@ import theme6 from '../assets/images/theme6.webp'
import theme7 from '../assets/images/theme7.webp' import theme7 from '../assets/images/theme7.webp'
const defaultIcon = { 'label': 'react', 'value': 'react' } const defaultIcon = { 'label': 'react', 'value': 'react' }
const defaultSettings = { const defaultSettings = {
title: "A begineers guide to frontend development", title: "A beginners guide to frontend development",
bgColor: "#949ee5", bgColor: "#949ee5",
pattern: "", pattern: "",
download: "PNG", download: "PNG",
@ -71,7 +68,7 @@ class Editor extends React.Component {
render() { render() {
return ( return (
<div className="max-w-[1400px] mx-auto"> <div className="max-w-[1400px] mx-auto">
<Header /> <Header />
<ImgProvider> <ImgProvider>
@ -79,43 +76,43 @@ class Editor extends React.Component {
<div className="bg-white flex flex-col h-100 md:w-3/12"> <div className="bg-white flex flex-col h-100 md:w-3/12">
<Tab.Group> <div>
<div className="flex md:flex-row flex-col"> <div className="flex md:flex-row flex-col">
<div className="bg-white border-dashed border-r-2 border-gray-100 w-full p-4 "> <div className="bg-white font-Inter border-dashed border-r-2 border-gray-100 w-full p-4 ">
<div> <div>
<div className="m-2 flex flex-col"> <div className="m-2 flex flex-col">
<span className="font-medium pb-1">Blog Title</span> <span className="font-medium text-sm pb-1">Blog Title</span>
<textarea <textarea
type="text" type="text"
value={this.state.title} value={this.state.title}
placeholder="Enter title here" placeholder="Enter title here"
className="focus:outline-none border text-gray-700 text-xl rounded p-2 h-24" className="focus:outline-none border text-gray-700 text-lg rounded p-2 h-24"
onChange={(e) => this.setState({ title: e.target.value })} onChange={(e) => this.setState({ title: e.target.value })}
/> />
</div> </div>
<div className="flex flex-col m-2 "> <div className="flex flex-col m-2 ">
<span className="font-medium pb-1">Author</span> <span className="font-medium text-sm pb-1">Author</span>
<input <input
type="text" type="text"
value={this.state.author} value={this.state.author}
placeholder="Author" placeholder="Author"
className="focus:outline-none border text-gray-700 text-xl rounded bg-white p-2" className="focus:outline-none border text-gray-700 text-lg 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>
<div className="flex flex-col m-2 "> <div className="flex flex-col m-2 ">
<span className="font-medium pb-1">Icon</span> <span className="font-medium text-sm pb-1">Icon</span>
<Select value={this.state.icon} <Select value={this.state.icon}
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="outline-none focus:outline-none text-xl text-gray-700" className="outline-none focus:outline-none items-center text-lg text-gray-700"
/> />
</div> </div>
@ -133,12 +130,12 @@ class Editor extends React.Component {
<div className="flex items-center"> <div className="flex items-center">
<div className="flex flex-col m-2 w-1/2"> <div className="flex flex-col m-2 w-1/2">
<span className="font-medium pb-1">Font</span> <span className="font-medium text-sm pb-1">Font</span>
<select <select
value={this.state.font} value={this.state.font}
onChange={(e) => this.setState({ font: e.target.value })} onChange={(e) => this.setState({ font: e.target.value })}
className="focus:outline-none text-gray-700 text-xl p-2 rounded border"> className="focus:outline-none text-gray-700 text-lg 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,13 +145,13 @@ class Editor extends React.Component {
</select> </select>
</div> </div>
<div className="flex flex-col m-2 w-1/2"> <div className="flex flex-col m-2 w-1/2">
<span className="font-medium pb-1">Color</span> <span className="font-medium text-sm pb-1">Color</span>
<div className="border rounded flex items-center p-2"> <div className="border rounded flex items-center p-1">
<span className="text-xl text-gray-700 mx-2">{this.state.bgColor}</span> {/* <span className="text-base text-gray-700 mx-2">{this.state.bgColor}</span> */}
<input type="color" value={this.state.bgColor} <input type="color" value={this.state.bgColor}
onChange={(e) => this.setState({ bgColor: e.target.value })} onChange={(e) => this.setState({ bgColor: e.target.value })}
className="h-8 w-8 ml-auto mr-1 rounded" className="h-8 w-full rounded"
/> />
</div> </div>
</div> </div>
@ -163,11 +160,11 @@ class Editor extends React.Component {
<div className="flex items-center"> <div className="flex items-center">
{/* <div className="flex flex-col m-2 w-1/2"> <div className="flex flex-col m-2 w-1/2">
<span className="font-medium pb-1">Pattern</span> <span className="font-medium text-sm pb-1">Pattern</span>
<select <select
onChange={(e) => this.setState({ pattern: e.target.value })} onChange={(e) => this.setState({ pattern: e.target.value })}
className="focus:outline-none border text-xl p-2 rounded" className="focus:outline-none border text-lg p-2 rounded"
value={this.state.pattern}> value={this.state.pattern}>
<option>none</option> <option>none</option>
@ -190,15 +187,15 @@ class Editor extends React.Component {
<option>jupiter</option> <option>jupiter</option>
<option>sun</option> <option>sun</option>
</select> </select>
</div> */} </div>
<div className="flex flex-col m-2 w-full"> <div className="flex flex-col m-2 w-full">
<span className="font-medium pb-1">Platform</span> <span className="font-medium text-sm pb-1">Platform</span>
<select <select
onChange={(e) => this.setState({ platform: e.target.value })} onChange={(e) => this.setState({ platform: e.target.value })}
value={this.state.platform} value={this.state.platform}
className="focus:outline-none text-gray-700 text-xl p-2 rounded border"> className="focus:outline-none text-gray-700 text-lg p-2 rounded border">
<option>hashnode</option> <option>hashnode</option>
<option>dev</option> <option>dev</option>
</select> </select>
@ -207,9 +204,10 @@ class Editor extends React.Component {
</div> </div>
<button <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" className="flex items-center bg-gray-700 hover:bg-gray-800 text-white rounded-lg mt-6 text-base p-1 px-4 mx-auto border"
onClick={this.handleReset}> onClick={this.handleReset}>
<span>Reset All</span> <svg xmlns="http://www.w3.org/2000/svg" className="w-5 h-5 text-white mr-2 " fill="currentColor" viewBox="0 0 24 24" ><path d="M12 16c1.671 0 3-1.331 3-3s-1.329-3-3-3-3 1.331-3 3 1.329 3 3 3z"></path><path d="M20.817 11.186a8.94 8.94 0 0 0-1.355-3.219 9.053 9.053 0 0 0-2.43-2.43 8.95 8.95 0 0 0-3.219-1.355 9.028 9.028 0 0 0-1.838-.18V2L8 5l3.975 3V6.002c.484-.002.968.044 1.435.14a6.961 6.961 0 0 1 2.502 1.053 7.005 7.005 0 0 1 1.892 1.892A6.967 6.967 0 0 1 19 13a7.032 7.032 0 0 1-.55 2.725 7.11 7.11 0 0 1-.644 1.188 7.2 7.2 0 0 1-.858 1.039 7.028 7.028 0 0 1-3.536 1.907 7.13 7.13 0 0 1-2.822 0 6.961 6.961 0 0 1-2.503-1.054 7.002 7.002 0 0 1-1.89-1.89A6.996 6.996 0 0 1 5 13H3a9.02 9.02 0 0 0 1.539 5.034 9.096 9.096 0 0 0 2.428 2.428A8.95 8.95 0 0 0 12 22a9.09 9.09 0 0 0 1.814-.183 9.014 9.014 0 0 0 3.218-1.355 8.886 8.886 0 0 0 1.331-1.099 9.228 9.228 0 0 0 1.1-1.332A8.952 8.952 0 0 0 21 13a9.09 9.09 0 0 0-.183-1.814z"></path></svg>
<span className="font-Inter">Reset All</span>
</button> </button>
</div> </div>
@ -219,7 +217,7 @@ class Editor extends React.Component {
</div> </div>
</div> </div>
</Tab.Group> </div>
{/* <div className="mx-4 my-1"> {/* <div className="mx-4 my-1">