mirror of
https://github.com/woodchen-ink/CoverView.git
synced 2025-07-18 05:51:56 +08:00
add themes visual section
This commit is contained in:
rutik wankhade
parent
aa3516cebc
commit
300b330b3c
BIN
src/assets/images/theme1.webp
Normal file
BIN
src/assets/images/theme1.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
BIN
src/assets/images/theme2.webp
Normal file
BIN
src/assets/images/theme2.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
BIN
src/assets/images/theme3.webp
Normal file
BIN
src/assets/images/theme3.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
BIN
src/assets/images/theme4.webp
Normal file
BIN
src/assets/images/theme4.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
@ -7,6 +7,12 @@ import { ImgProvider } from '../utils/ImgContext'
|
||||
import Header from "./Header";
|
||||
import { Tab } from '@headlessui/react'
|
||||
|
||||
import theme1 from '../assets/images/theme1.webp'
|
||||
import theme2 from '../assets/images/theme2.webp'
|
||||
import theme3 from '../assets/images/theme3.webp'
|
||||
import theme4 from '../assets/images/theme4.webp'
|
||||
|
||||
|
||||
const defaultSettings = {
|
||||
title: "How I built my first project with react",
|
||||
bgColor: "#ffe9e3",
|
||||
@ -67,15 +73,13 @@ class Editor extends React.Component {
|
||||
<Header />
|
||||
|
||||
<ImgProvider>
|
||||
|
||||
<div className="flex md:flex-row flex-col bg-gray-50 ">
|
||||
|
||||
<div className="bg-white flex flex-col h-100 border w-4/12">
|
||||
<div className="bg-white flex flex-col h-100 w-4/12">
|
||||
|
||||
<Tab.Group>
|
||||
<div className="flex">
|
||||
|
||||
|
||||
<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>
|
||||
@ -140,9 +144,7 @@ class Editor extends React.Component {
|
||||
|
||||
<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>
|
||||
@ -151,8 +153,6 @@ class Editor extends React.Component {
|
||||
<option>font-Poppins</option>
|
||||
<option>font-Anek</option>
|
||||
<option>font-Nunito</option>
|
||||
|
||||
|
||||
</select>
|
||||
</div>
|
||||
<div className="flex flex-col m-2 ">
|
||||
@ -206,12 +206,9 @@ class Editor extends React.Component {
|
||||
<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>
|
||||
|
||||
@ -223,36 +220,40 @@ class Editor extends React.Component {
|
||||
<span>Reset All</span>
|
||||
</button>
|
||||
|
||||
|
||||
|
||||
</Tab.Panel>
|
||||
|
||||
|
||||
<Tab.Panel className="h-99 w-full flex flex-col justify-center">
|
||||
|
||||
<div className="flex items-center border rounded-xl border-gray-50 px-4">
|
||||
<h2 className="text-lg pl-2 font-inter font-semibold">Themes</h2>
|
||||
<div className="ml-auto mr-1 p-2">
|
||||
<RandomTheme onThemeChange={this.getRandomTheme} />
|
||||
|
||||
<Tab.Panel className=" w-full flex flex-col justify-center">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<RandomTheme onThemeChange={this.getRandomTheme} />
|
||||
<div className="p-4 flex flex-wrap overflow-y-scroll ">
|
||||
|
||||
<img src={theme1} alt="basic theme"
|
||||
onClick={(e) => this.setState({ theme: "basic" })}
|
||||
className="opacity-60 cursor-pointer border-gray-100 hover:scale-105 duration-300 hover:border-gray-200 border m-2 "
|
||||
/>
|
||||
<img src={theme2} alt="basic theme"
|
||||
onClick={(e) => this.setState({ theme: "modern" })}
|
||||
className="opacity-60 cursor-pointer border-gray-100 hover:scale-105 hover:border-gray-200 duration-300 border m-2 "
|
||||
/>
|
||||
<img src={theme3} alt="basic theme"
|
||||
onClick={(e) => this.setState({ theme: "stylish" })}
|
||||
className="opacity-60 cursor-pointer border border-gray-100 hover:border-gray-200 hover:scale-105 duration-300 m-2"
|
||||
/>
|
||||
<img src={theme4} alt="basic theme"
|
||||
onClick={(e) => this.setState({ theme: "preview" })}
|
||||
className="opacity-60 cursor-pointer border border-gray-100 hover:border-gray-200 hover:scale-105 duration-300 m-2"
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<div className="flex flex-col m-2 w-1/2">
|
||||
|
||||
<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>
|
||||
|
||||
@ -274,15 +275,6 @@ class Editor extends React.Component {
|
||||
|
||||
</div>
|
||||
|
||||
{/* <div className="m-2 items-center justify-center flex flex-col">
|
||||
<RandomTheme onThemeChange={this.getRandomTheme} />
|
||||
<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> */}
|
||||
|
||||
<div className="flex m-6 flex-col items-center justify-center ">
|
||||
|
||||
<ComponentToImg downloadAs={this.state.download}>
|
||||
|
||||
@ -107,8 +107,11 @@ class RandomTheme extends React.Component {
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className="shuffle-btn mx-auto w-14 flex justify-center items-center shadow-xl shadow-gray-100 h-14 p-2 bg-indigo-400 rounded-xl cursor-pointer" onClick={this.changeTheme}>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" className="text-white w-10 h-10" width="24" height="24" viewBox="0 0 24 24" ><path d="M17 17h-1.559l-9.7-10.673A1 1 0 0 0 5.001 6H2v2h2.559l4.09 4.5-4.09 4.501H2v2h3.001a1 1 0 0 0 .74-.327L10 13.987l4.259 4.686a1 1 0 0 0 .74.327H17v3l5-4-5-4v3z"></path><path d="M15.441 8H17v3l5-3.938L17 3v3h-2.001a1 1 0 0 0-.74.327l-3.368 3.707 1.48 1.346L15.441 8z"></path></svg>
|
||||
<div className="flex flex-col justify-center">
|
||||
<div className="shuffle-btn w-10 flex justify-center items-center shadow-xl shadow-gray-100 h-10 p-2 bg-indigo-400 rounded-xl cursor-pointer" onClick={this.changeTheme}>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" className="text-white w-10 h-10" width="24" height="24" viewBox="0 0 24 24" ><path d="M17 17h-1.559l-9.7-10.673A1 1 0 0 0 5.001 6H2v2h2.559l4.09 4.5-4.09 4.501H2v2h3.001a1 1 0 0 0 .74-.327L10 13.987l4.259 4.686a1 1 0 0 0 .74.327H17v3l5-4-5-4v3z"></path><path d="M15.441 8H17v3l5-3.938L17 3v3h-2.001a1 1 0 0 0-.74.327l-3.368 3.707 1.48 1.346L15.441 8z"></path></svg>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -11,4 +11,28 @@
|
||||
|
||||
.h-100{
|
||||
height:36rem;
|
||||
}
|
||||
|
||||
.h-99{
|
||||
height:35rem;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
/* width: 8px; */
|
||||
display: none;
|
||||
}
|
||||
|
||||
Track
|
||||
::-webkit-scrollbar-track {
|
||||
background: #f1f1f1;
|
||||
}
|
||||
|
||||
/* Handle */
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #ccccff;
|
||||
}
|
||||
|
||||
/* Handle on hover */
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #b3b3ff;
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user