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: display icons with label in options

Browse Source
This commit is contained in:
rutik wankhade 2022-04-24 19:29:57 +05:30
parent d851553d6f
commit a0036534e3
4 changed files with 16 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/Editor.js
View File

@ -41,7 +41,14 @@ class Editor extends React.Component {
this.setState({ bgColor: theme.bgColor, borderColor: theme.bdColor, pattern: Pattern }); this.setState({ bgColor: theme.bgColor, borderColor: theme.bdColor, pattern: Pattern });
} }
formatOptionLabel = ({ value, label }) => (
<div className="flex">
<span className="mr-2">{label}</span>
<div className="ml-auto mr-2">
<i className={`devicon-${value}-plain dev-icon text-2xl`}></i>
</div>
</div>
);
render() { render() {
@ -124,6 +131,7 @@ class Editor extends React.Component {
<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}
className="text-xl text-gray-700" className="text-xl text-gray-700"
/> />
</div> </div>
@ -210,7 +218,7 @@ class Editor extends React.Component {
<div className="flex flex-col items-center justify-center "> <div className="flex flex-col items-center justify-center ">
<div className="flex mb-4 items-center bg-white p-2 mt-2 rounded justify-center w-full"> <div className="flex mb-4 items-center bg-white p-2 mt-2 rounded justify-center w-full">
<span className="mx-4 text-md font-semibold">Coverview is live on Product Hunt today.</span> <span className="mx-4 text-md font-semibold">Coverview is live on Product Hunt Today.</span>
<a href="https://www.producthunt.com/posts/coverview-2?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-coverview&#0045;2" target="_blank" rel="noreferrer"><img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=343671&theme=light" alt="Coverview - Creating&#0032;cover&#0032;images&#0032;for&#0032;your&#0032;blog&#0032;is&#0032;now&#0032;super&#0032;easy | Product Hunt" className="w-2/3" /></a> <a href="https://www.producthunt.com/posts/coverview-2?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-coverview&#0045;2" target="_blank" rel="noreferrer"><img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=343671&theme=light" alt="Coverview - Creating&#0032;cover&#0032;images&#0032;for&#0032;your&#0032;blog&#0032;is&#0032;now&#0032;super&#0032;easy | Product Hunt" className="w-2/3" /></a>
</div> </div>

2
src/components/Themes/BasicTheme.js
View File

@ -20,7 +20,7 @@ const BasicTheme = ({ config }) => {
<div className=" flex mx-4 mt-10 p-4 rounded-xl items-center bg-white"> <div className=" flex mx-4 mt-10 p-4 rounded-xl items-center bg-white">
<i className={`devicon-${icon.value}-plain dev-icon text-4xl`}></i> <i className={`devicon-${icon.value}-plain dev-icon text-4xl`}></i>
<h2 className="text-xl ml-auto mr-2 font-semibold"> - {author}</h2> <h2 className="text-xl ml-auto mr-2 font-semibold">{author}</h2>
</div> </div>
</div> </div>

2
src/components/Themes/ModernTheme.js
View File

@ -18,7 +18,7 @@ const ModernTheme = ({ config }) => {
<div className="h-full w-2/3"> <div className="h-full w-2/3">
<div className={`${font} bg-white px-12 justify-center text-left rounded-xl h-full p-4 flex flex-col`}> <div className={`${font} bg-white px-12 justify-center text-left rounded-xl h-full p-4 flex flex-col`}>
<h1 className="text-3xl md:text-5xl font-bold ">{title}</h1> <h1 className="text-3xl md:text-5xl font-bold ">{title}</h1>
<h2 className="text-xl mt-10 font-semibold text-left "> - {author}</h2> <h2 className="text-xl mt-10 font-semibold text-left ">{author}</h2>
</div> </div>
</div> </div>
</div> </div>

2
src/components/Themes/OutlineTheme.js
View File

@ -23,7 +23,7 @@ const OutlineTheme = ({ config }) => {
<div className={`${font} w-full border-gray-800 border-t-4 flex mt-10 p-2 px-6 items-center bg-white`}> <div className={`${font} w-full border-gray-800 border-t-4 flex mt-10 p-2 px-6 items-center bg-white`}>
<i className={`devicon-${icon.value}-plain dev-icon text-4xl`}></i> <i className={`devicon-${icon.value}-plain dev-icon text-4xl`}></i>
<h2 className="text-xl ml-auto mr-2 font-semibold"> - {author}</h2> <h2 className="text-xl ml-auto mr-2 font-semibold">{author}</h2>
</div> </div>