From a0036534e35560c90bb6425ffb2bbc2dfde97fc8 Mon Sep 17 00:00:00 2001
From: rutik wankhade <rutikwankhade2@gmail.com>
Date: Sun, 24 Apr 2022 19:29:57 +0530
Subject: [PATCH] feat: display icons with label in options

---
 src/components/Editor.js              | 18 +++++++++++++-----
 src/components/Themes/BasicTheme.js   |  2 +-
 src/components/Themes/ModernTheme.js  |  2 +-
 src/components/Themes/OutlineTheme.js |  2 +-
 4 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/src/components/Editor.js b/src/components/Editor.js
index ad2d630..66598e2 100644
--- a/src/components/Editor.js
+++ b/src/components/Editor.js
@@ -41,7 +41,14 @@ class Editor extends React.Component {
 		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() {
@@ -124,6 +131,7 @@ class Editor extends React.Component {
 						<Select value={this.state.icon}
 							onChange={(selectedOption) => this.setState({ icon: selectedOption })}
 							options={this.state.devIconOptions}
+							formatOptionLabel={this.formatOptionLabel}
 							className="text-xl text-gray-700"
 						/>
 					</div>
@@ -195,8 +203,8 @@ class Editor extends React.Component {
 						</select>
 					</div> */}
 
-					
-					
+
+
 				</div>
 
 				<div className="m-2 items-center justify-center flex flex-col">
@@ -210,8 +218,8 @@ class Editor extends React.Component {
 
 				<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">
-						<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>
+						<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>
 
 					</div>
 					<ComponentToImg downloadAs={this.state.download}>
diff --git a/src/components/Themes/BasicTheme.js b/src/components/Themes/BasicTheme.js
index f358015..8ef1bcb 100644
--- a/src/components/Themes/BasicTheme.js
+++ b/src/components/Themes/BasicTheme.js
@@ -20,7 +20,7 @@ const BasicTheme = ({ config }) => {
 
                     <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>
-                        <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>
diff --git a/src/components/Themes/ModernTheme.js b/src/components/Themes/ModernTheme.js
index 981a11f..a154461 100644
--- a/src/components/Themes/ModernTheme.js
+++ b/src/components/Themes/ModernTheme.js
@@ -18,7 +18,7 @@ const ModernTheme = ({ config }) => {
                     <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`}>
                             <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>
diff --git a/src/components/Themes/OutlineTheme.js b/src/components/Themes/OutlineTheme.js
index ba2bab7..6e9e7c3 100644
--- a/src/components/Themes/OutlineTheme.js
+++ b/src/components/Themes/OutlineTheme.js
@@ -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`}>
                     <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>