wood/CoverView
1
0
Fork 0
mirror of https://github.com/woodchen-ink/CoverView.git synced 2025-07-18 14:01:56 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: add footer and faq page

Browse Source
This commit is contained in:
rutik wankhade 2022-07-21 15:05:53 +05:30
parent 28981cd953
commit e553aaba6b
4 changed files with 185 additions and 154 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/App.js
View File

@ -3,6 +3,7 @@ import { BrowserRouter, Route, Routes } from "react-router-dom";
import Editor from './Editor'; import Editor from './Editor';
import Home from './Home' import Home from './Home'
import Faq from './Faq';
const App = () => { const App = () => {
@ -11,6 +12,7 @@ const App = () => {
<Routes> <Routes>
<Route exact path="/" element={<Home />} /> <Route exact path="/" element={<Home />} />
<Route exact path="/editor" element={<Editor />} /> <Route exact path="/editor" element={<Editor />} />
<Route exact path="/faq" element={<Faq />} />
</Routes> </Routes>
</BrowserRouter> </BrowserRouter>
); );

307
src/components/Editor.js
View File

@ -66,185 +66,190 @@ class Editor extends React.Component {
<div> <div>
<div className="text-xl bg-white flex border-b border-gray-100 shadow-xl p-2"> <div className="text-xl bg-white flex border-b border-gray-100 shadow-xl 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-2"/> <img src={logo} alt="logo" className="w-8 h-8 mx-4" />
<h1 className="font-semibold">Coverview</h1> <h1 className="font-semibold">Coverview</h1>
</Link> </Link>
<a href="a" className="ml-auto mr-4 bg-blue-400 text-sm rounded-full px-4 font-semibold text-white p-1">Share on Twitter</a> <div className="ml-auto mr-4 ">
<a href="a" className="mx-2 bg-blue-400 text-sm rounded-full px-4 font-semibold text-white p-1">Share on Twitter</a>
<a href="https://www.buymeacoffee.com/rutikwankhade" target="_blank" rel="noreferrer" className="text-base mx-2 font-Nunito">🥤 Buy me a coffee</a>
</div>
</div> </div>
<ImgProvider> <ImgProvider>
<div className="flex md:flex-row flex-col bg-gray-50 ">
<div className="bg-white shadow-sm p-4 flex flex-col md:w-1/4">
<div className="m-2 flex flex-col"> <div className="flex md:flex-row flex-col bg-gray-50 ">
<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 "> <div className="bg-white shadow-sm p-4 flex flex-col md:w-1/4">
<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="m-2 flex flex-col">
<div className="flex items-center"> <span className="font-medium">Blog Title</span>
<textarea
<div className="flex flex-col m-2 w-1/2"> type="text"
<span className="font-medium">Font</span> value={this.state.title}
placeholder="Enter title here"
<select className="focus:outline-none border text-gray-700 text-xl rounded p-2 h-24"
value={this.state.font} onChange={(e) => this.setState({ title: e.target.value })}
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> <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 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 flex-col m-2 "> <div className="flex flex-col m-2 ">
<span className="font-medium">Icon</span> <span className="font-medium">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 text-xl text-gray-700"
/> />
</div> </div>
{this.state.icon.label === 'custom' ? {this.state.icon.label === 'custom' ?
<div className="flex items-center justify-center m-2"> <div className="flex items-center justify-center m-2">
<input type="file" <input type="file"
className="focus:outline-none text-lg cursor-pointer bg-white rounded border" className="focus:outline-none text-lg cursor-pointer bg-white rounded border"
onChange={(e) => this.setState({ 'customIcon': URL.createObjectURL(e.target.files[0]) })} onChange={(e) => this.setState({ 'customIcon': URL.createObjectURL(e.target.files[0]) })}
/> />
</div> </div>
: :
<div></div> <div></div>
} }
<div className="flex"> <div className="flex">
<div className="flex flex-col m-2 w-1/2"> <div className="flex flex-col m-2 w-1/2">
<span className="font-medium">Pattern</span> <span className="font-medium">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-xl p-2 rounded"
value={this.state.pattern}> value={this.state.pattern}>
<option>None</option> <option>None</option>
<option>graph-paper</option> <option>graph-paper</option>
<option>jigsaw</option> <option>jigsaw</option>
<option>hideout</option> <option>hideout</option>
<option>dots</option> <option>dots</option>
<option>falling-triangles</option> <option>falling-triangles</option>
<option>circuit-board</option> <option>circuit-board</option>
<option>temple</option> <option>temple</option>
<option>anchors</option> <option>anchors</option>
<option>brickwall</option> <option>brickwall</option>
<option>overlapping-circles</option> <option>overlapping-circles</option>
<option>wiggle</option> <option>wiggle</option>
<option>tic-tac-toe</option> <option>tic-tac-toe</option>
<option>leaf</option> <option>leaf</option>
<option>bubbles</option> <option>bubbles</option>
<option>squares</option> <option>squares</option>
<option>explorer</option> <option>explorer</option>
<option>jupiter</option> <option>jupiter</option>
<option>sun</option> <option>sun</option>
</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">Theme</span> <span className="font-medium">Theme</span>
<select <select
onChange={(e) => this.setState({ theme: e.target.value })} onChange={(e) => this.setState({ theme: e.target.value })}
value={this.state.theme} value={this.state.theme}
className="focus:outline-none text-gray-700 text-xl p-2 rounded border"> className="focus:outline-none text-gray-700 text-xl p-2 rounded border">
<option>stylish</option> <option>stylish</option>
<option>modern</option> <option>modern</option>
<option>basic</option> <option>basic</option>
<option>preview</option> <option>preview</option>
<option>outline</option> <option>outline</option>
</select> </select>
</div> </div>
</div> </div>
<div className="flex flex-col m-2"> <div className="flex flex-col m-2">
<span className="font-medium">Platform</span> <span className="font-medium">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-xl p-2 rounded border">
<option>hashnode</option> <option>hashnode</option>
<option>dev</option> <option>dev</option>
</select> </select>
</div> </div>
<span className="text-sm mt-4 text-center text-gray-400">Made with 💖 by <a href="https://twitter.com/WankhadeRutik"
target="_blank" rel="noopener noreferrer" className="underline hover:text-purple-400">Rutik Wankhade</a></span>
{/* <div className="mx-4 my-1">
{/* <div className="mx-4 my-1">
<h6>Download As</h6> <h6>Download As</h6>
<select onChange={(e) => this.setState({ download: e.target.value })} <select onChange={(e) => this.setState({ download: e.target.value })}
className="form-control input" className="form-control input"
@ -256,21 +261,21 @@ 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 flex-col items-center justify-center "> <div className="flex flex-col items-center justify-center ">
{/* <div className="w-full flex items-center mb-4 "> {/* <div className="w-full flex items-center mb-4 ">
<h1 className="ml-2 mr-auto text-gray-800 text-2xl font-bold ">Coverview</h1> <h1 className="ml-2 mr-auto text-gray-800 text-2xl font-bold ">Coverview</h1>
@ -291,14 +296,14 @@ class Editor extends React.Component {
</div> </div>
</div> */} </div> */}
<ComponentToImg downloadAs={this.state.download}> <ComponentToImg downloadAs={this.state.download}>
<CoverImage {...this.state} /> <CoverImage {...this.state} />
</ComponentToImg> </ComponentToImg>
</div> </div>
</div> </div>
</ImgProvider> </ImgProvider>
</div> </div>
); );
} }

11
src/components/Faq.js Normal file
View File

@ -0,0 +1,11 @@
import React from 'react';
const Faq = () => {
return (
<div>
faq
</div>
);
}
export default Faq;

19
src/components/Home.js
View File

@ -171,10 +171,9 @@ const Home = () => {
</div> </div>
<WallOfLove />
<WallOfLove /> <div className="md:w-1/2 mx-auto pt-20">
<div className="md:w-1/2 mx-auto py-20">
<h2 className="text-5xl text-center font-Anek font-bold text-gray-700 mx-auto">Simple, quick, and easy to use</h2> <h2 className="text-5xl text-center font-Anek font-bold text-gray-700 mx-auto">Simple, quick, and easy to use</h2>
<p className="text-2xl text-center my-2">So you can focus on writing your blog and never worry about those cover images.</p> <p className="text-2xl text-center my-2">So you can focus on writing your blog and never worry about those cover images.</p>
<Link to="/editor" > <Link to="/editor" >
@ -186,6 +185,20 @@ const Home = () => {
<footer className="bg-white p-10 flex font-Inter md:px-20 justify-center items-center">
<div className="w-1/2 flex flex-col">
<span className="text-lg">Made with 💛 by <a href="https://twitter.com/WankhadeRutik" className="font-semibold" target="_blank" rel="noreferrer">Rutik Wankhade</a></span>
<span className="text-lg font-Nunito">checkout <a href="https://rutikwankhade.dev" target="_blank" rel="noreferrer" className="text-purple-400 hover:text-pink-400">more cool stuff</a> I built</span>
</div>
<div className="text-lg flex ">
<Link to="/faq" className="m-2 hover:font-semibold">📌 How to use</Link>
<a href="https://github.com/rutikwankhade/CoverView" target="_blank" rel="noreferrer" className="m-2 hover:font-semibold">⭐ Star on Github</a>
<a href="https://www.buymeacoffee.com/rutikwankhade" target="_blank" rel="noreferrer" className="m-2 hover:font-semibold">🥤 Buy me a coffee</a>
</div>
</footer>
</div> </div>
); );
} }