Merge pull request #441 from wweverma1/feature/add-kofi-button

issue #424: add Ko-fi donation option

Author: rahuldkjain

src/components/markdown.js

@@ -266,6 +266,9 @@ const DisplaySupport = props => {
       {props.support.buyMeACoffee &&
         `<a href="https://www.buymeacoffee.com/${props.support.buyMeACoffee}">
       <img align="left" src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" height="50" width="210" alt="${props.support.buyMeACoffee}" /></a>`}
+      {props.support.buyMeAKofi &&
+        `<a href="https://ko-fi.com/${props.support.buyMeAKofi}">
+      <img align="left" src="https://cdn.ko-fi.com/cdn/kofi3.png?v=3" height="50" width="210" alt="${props.support.buyMeAKofi}" /></a>`}
       {`</p><br><br>`}
       <br />
       <br />
@@ -277,7 +280,7 @@ const DisplaySupport = props => {
 const Markdown = props => {
   const icon_base_url =
     "https://raw.githubusercontent.com/rahuldkjain/github-profile-readme-generator/master/src/images/icons/Social/";
-    
+
   return (
     <div id="markdown-content" className="break-words">
       <>
@@ -405,7 +408,7 @@ const Markdown = props => {
       </>
       <>
         <DisplaySocial
-          base="https://linkedin.com/in"    
+          base="https://linkedin.com/in"
           icon={icon_base_url + "linked-in-alt.svg"}
           username={props.social.linkedin}
         />

src/components/markdownPreview.js

@@ -122,7 +122,7 @@ export const DisplaySocial = props => {
 
 export const SocialPreview = props => {
   let viewSocial = false
-    const icon_base_url =
+  const icon_base_url =
     "https://raw.githubusercontent.com/rahuldkjain/github-profile-readme-generator/master/src/images/icons/Social/";
   Object.keys(props.social).forEach(key => {
     if (props.social[key] && key != "github") viewSocial = true
@@ -153,7 +153,7 @@ export const SocialPreview = props => {
       </>
       <>
         <DisplaySocial
-          base="https://linkedin.com/in"    
+          base="https://linkedin.com/in"
           icon={icon_base_url + "linked-in-alt.svg"}
           username={props.social.linkedin}
         />
@@ -413,24 +413,36 @@ export const SupportPreview = props => {
       viewSupport = true
     }
   })
-  return (
-    <div className="mb-4">
+  return props.support.buyMeACoffee || props.support.buyMeAKofi ? (
+    <div className="flex flex-wrap justify-start items-center">
       <SectionTitle label="Support:" visible={viewSupport} />
       {props.support.buyMeACoffee && (
-        <div style={{ width: "210px" }}>
-          <a
-            href={`https://www.buymeacoffee.com/` + props.support.buyMeACoffee}
-            target="_blank"
-          >
-            <img
-              src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png"
-              alt="Buy Me A Coffee"
-              className="w-36 h-8 sm:w-52 sm:h-12"
-            />
-          </a>
-        </div>
+        <a
+          href={`https://www.buymeacoffee.com/` + props.support.buyMeACoffee}
+          target="_blank"
+        >
+          <img
+            src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png"
+            alt="Buy Me A Coffee"
+            className="mb-4 mr-4 w-36 h-8 sm:w-52 sm:h-12"
+          />
+        </a>
+      )}
+      {props.support.buyMeAKofi && (
+        <a
+          href={`https://ko-fi.com/` + props.support.buyMeAKofi}
+          target="_blank"
+        >
+          <img
+            src="https://cdn.ko-fi.com/cdn/kofi3.png?v=3"
+            alt="Buy Me A Ko-fi"
+            className="mb-4 mr-4 w-36 h-8 sm:w-52 sm:h-12"
+          />
+        </a>
       )}
     </div>
+  ) : (
+    ""
   )
 }
 

src/components/support.js

@@ -7,20 +7,34 @@ const Support = props => {
         Support
       </div>
       <div className="flex flex-wrap justify-start items-center">
-        <div className="w-2/5 flex justify-between items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0">
+        <div className="w-1/2 flex justify-start items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0">
           <img
             src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png"
-            className="w-36 h-8 sm:w-52 sm:h-12"
+            className="w-36 h-8 sm:w-52 sm:h-12 mr-1 sm:mr-4"
             alt="buymeacoffee"
           />
           <input
             id="buy-me-a-coffee"
             placeholder="buymeacoffee username"
-            className="outline-none placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-1 sm:px-2 ml-2 sm:ml-0 focus:border-blue-700"
+            className="outline-none placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-1 focus:border-blue-700"
             value={props.support.buyMeACoffee || ""}
             onChange={event => props.handleSupportChange("buyMeACoffee", event)}
           />
         </div>
+        <div className="w-1/2 flex justify-start items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0">
+          <img
+            src="https://cdn.ko-fi.com/cdn/kofi3.png?v=3"
+            className="w-36 h-8 sm:w-52 sm:h-12 mr-1 sm:mr-4"
+            alt="buymeakofi"
+          />
+          <input
+            id="buy-me-a-kofi"
+            placeholder="Ko-fi username"
+            className="outline-none placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-1 sm:px-2 ml-2 sm:ml-0 focus:border-blue-700"
+            value={props.support.buyMeAKofi || ""}
+            onChange={event => props.handleSupportChange("buyMeAKofi", event)}
+          />
+        </div>
       </div>
     </div>
   )