Merge pull request #162 from Maddoxx88/patch-5

[add]: checkbox for twitterBadge as add-on.

src/components/addons.js

@@ -190,6 +190,13 @@ const Addons = props => {
       >
         display top skills
       </AddonsItem>
+      <AddonsItem
+        inputId="twitter-badge"
+        inputChecked={props.data.twitterBadge}
+        onInputChange={() => props.handleCheckChange("twitterBadge")}
+      >
+        display twitter badge
+      </AddonsItem>
       <AddonsItem
         inputId="dev-dynamic-blogs"
         inputChecked={props.data.devDynamicBlogs}

src/components/markdown.js

@@ -96,6 +96,19 @@ const Markdown = props => {
     }
     return ""
   }
+  const TwitterBadge = props => {
+    let link = "https://img.shields.io/twitter/follow/" + props.twitter + "?logo=twitter&style=for-the-badge"
+    if (props.show) {
+      return (
+        <>
+          {`<p align="left"> <img src="${link}" alt="${props.twitter}" /> </p>`}
+          <br />
+          <br />
+        </>
+      )
+    }
+    return ""
+  }
   const GithubProfileTrophy = props => {
     let link =
       "https://github-profile-trophy.vercel.app/?username=" + props.github
@@ -239,6 +252,10 @@ const Markdown = props => {
           show={props.data.githubProfileTrophy}
           github={props.social.github}
         />
+        <TwitterBadge
+          show={props.data.twitterBadge}
+          twitter={props.social.twitter}
+        />
       </>
       <>
         <DisplayWork

src/components/markdownPreview.js

@@ -237,6 +237,18 @@ const MarkdownPreview = props => {
     }
     return null
   }
+  const TwitterBadgePreview = props => {
+    let link = "https://img.shields.io/twitter/follow/" + props.twitter + "?logo=twitter&style=for-the-badge"
+    if (props.show) {
+      return (
+        <div className="text-left my-2">
+          {" "}
+          <img className="h-4 sm:h-6" src={link} alt={props.twitter} />{" "}
+        </div>
+      )
+    }
+    return null
+  }
   const GithubProfileTrophyPreview = props => {
     let link =
       "https://github-profile-trophy.vercel.app/?username=" + props.github
@@ -322,6 +334,10 @@ const MarkdownPreview = props => {
         show={props.data.githubProfileTrophy}
         github={props.social.github}
       />
+      <TwitterBadgePreview
+        show={props.data.twitterBadge}
+        twitter={props.social.twitter}
+      />
       <WorkPreview work={props} />
       <SocialPreview social={props.social} />
       <SkillsPreview skills={props.skills} />