From 3d68c2fb5d60004878c9e4d313ec523270fbb19b Mon Sep 17 00:00:00 2001
From: Eddie Jaoude <eddie@jaoudestudios.com>
Date: Sun, 5 Feb 2023 07:32:20 +0700
Subject: [PATCH 1/4] fix: refactor badges to component

---
 components/Badge.js         | 51 +++++++++++++++++++++++++++++++++++++
 components/hint/HintIcon.js | 24 -----------------
 pages/events.js             | 14 +++++-----
 3 files changed, 59 insertions(+), 30 deletions(-)
 create mode 100644 components/Badge.js
 delete mode 100644 components/hint/HintIcon.js

diff --git a/components/Badge.js b/components/Badge.js
new file mode 100644
index 00000000000..c0c03986d37
--- /dev/null
+++ b/components/Badge.js
@@ -0,0 +1,51 @@
+// profile photo numbers/stats
+// QR code?
+// discover tag
+// user card
+
+import Link from "./Link";
+
+export default function Badge({ title, content, path, position, children }) {
+  let css = "";
+  const cssTopRight = "top-0 right-0 bottom-auto left-auto";
+  const cssTopLeft = "top-0 left-0 bottom-auto right-auto";
+  const cssBottomRight = "bottom-0 right-0 top-auto left-auto";
+  const cssBottomLeft = "bottom-0 left-0 top-auto right-auto";
+  switch (position) {
+    case "top-right":
+      css = cssTopRight;
+      break;
+    case "top-left":
+      css = cssTopLeft;
+      break;
+    case "bottom-right":
+      css = cssBottomRight;
+      break;
+    case "bottom-left":
+      css = cssBottomLeft;
+      break;
+    default:
+      css = cssTopRight;
+  }
+  console.log(position, css);
+  const badge = (
+    <div
+      title={title}
+      className={`absolute inline-block translate-x-2/4 -translate-y-1/2 rotate-0 skew-x-0 skew-y-0 scale-x-100 scale-y-100 py-1 px-1.5 text-xs leading-none text-center whitespace-nowrap align-baseline font-bold bg-orange-600 text-black rounded-full z-10 ${css}`}
+    >
+      {content}
+    </div>
+  );
+
+  let clickable;
+  if (path) {
+    clickable = <Link href={path}>{badge}</Link>;
+  }
+
+  return (
+    <div className="inline-flex relative w-fit">
+      {children}
+      {clickable ? clickable : badge}
+    </div>
+  );
+}
diff --git a/components/hint/HintIcon.js b/components/hint/HintIcon.js
deleted file mode 100644
index c60df71bf03..00000000000
--- a/components/hint/HintIcon.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import Link from "next/link"
-// import Image from "next/image"
-// import { FaQuestionCircle } from "react-icons";
-import { FaQuestionCircle } from "react-icons/fa";
-import { IconContext } from "react-icons";
-
-
-export default function HintIcon({ path, placeholderText }) {
-    return (
-        <Link href={path} title={placeholderText} type="button" className="relative flex flex-col items-center group w-fit h-fit p-2">
-            <IconContext.Provider
-                value={{
-                    color: "black",
-                    style: {
-                        verticalAlign: "middle",
-                        color: '#FF9119'
-                    },
-                }}
-            >
-                <FaQuestionCircle aria-label="Help" className="text-[#FF9119]" />
-            </IconContext.Provider>
-        </Link>
-    )
-}
diff --git a/pages/events.js b/pages/events.js
index dc492693290..15b75bcefab 100644
--- a/pages/events.js
+++ b/pages/events.js
@@ -6,7 +6,7 @@ import EventCard from "../components/event/EventCard";
 import Page from "../components/Page";
 import { EventTabs } from "../components/event/EventTabs";
 import PageHead from "../components/PageHead";
-import HintIcon from '../components/hint/HintIcon'
+import Badge from "../components/Badge";
 
 export async function getServerSideProps(context) {
   let events = [];
@@ -74,11 +74,13 @@ export default function Events({ events }) {
 
       <Page>
         <div className="flex flex-row items-center">
-          <h1 className="text-4xl mb-4 font-bold ">Community events</h1>
-          <HintIcon
-            path={'/docs/how-to-guides/events'}
-            placeholderText={'Go To Event Docs'}
-          />
+          <Badge
+            content="?"
+            path="/docs/how-to-guides/events"
+            title="Go To Event Docs"
+          >
+            <h1 className="text-4xl mb-4 font-bold ">Community events</h1>
+          </Badge>
         </div>
         <EventTabs
           tabs={tabs}

From 385c00d08a40d10329f78eaf6d6dc60fbe535f0e Mon Sep 17 00:00:00 2001
From: Eddie Jaoude <eddie@jaoudestudios.com>
Date: Sun, 5 Feb 2023 10:22:57 +0700
Subject: [PATCH 2/4] fix: refactored search to use new badge component

---
 components/Badge.js | 16 ++++++++++++----
 components/Tag.js   | 16 +++-------------
 pages/search.js     | 17 +++++++++--------
 3 files changed, 24 insertions(+), 25 deletions(-)

diff --git a/components/Badge.js b/components/Badge.js
index c0c03986d37..d83a591162d 100644
--- a/components/Badge.js
+++ b/components/Badge.js
@@ -5,7 +5,15 @@
 
 import Link from "./Link";
 
-export default function Badge({ title, content, path, position, children }) {
+export default function Badge({
+  title,
+  content,
+  path,
+  position,
+  className,
+  children,
+  display = true,
+}) {
   let css = "";
   const cssTopRight = "top-0 right-0 bottom-auto left-auto";
   const cssTopLeft = "top-0 left-0 bottom-auto right-auto";
@@ -27,7 +35,7 @@ export default function Badge({ title, content, path, position, children }) {
     default:
       css = cssTopRight;
   }
-  console.log(position, css);
+
   const badge = (
     <div
       title={title}
@@ -43,9 +51,9 @@ export default function Badge({ title, content, path, position, children }) {
   }
 
   return (
-    <div className="inline-flex relative w-fit">
+    <div className={`inline-flex relative ${className ? className : "w-fit"}`}>
       {children}
-      {clickable ? clickable : badge}
+      {display && (clickable ? clickable : badge)}
     </div>
   );
 }
diff --git a/components/Tag.js b/components/Tag.js
index 5d9545b9583..61276f33ce8 100644
--- a/components/Tag.js
+++ b/components/Tag.js
@@ -1,8 +1,9 @@
 import { abbreviateNumber } from "../services/utils/abbreviateNumbers";
+import Badge from "./Badge";
 
 export default function Tag({ name, total, selected, onClick }) {
   return (
-    <div className="relative">
+    <Badge content={abbreviateNumber(total)} display={!!total}>
       <div
         onClick={onClick}
         className={`flex flex-row p-1 m-2 rounded-lg text-sm font-mono border-2 cursor-pointer shadow-none ${
@@ -13,17 +14,6 @@ export default function Tag({ name, total, selected, onClick }) {
       >
         {name}
       </div>
-      {total && (
-        <div
-          className={`absolute inline-block top-0 right-0 bottom-auto left-auto translate-x-1/4 -translate-y-1/3 rotate-0 skew-x-0 skew-y-0 scale-x-100 scale-y-100 py-1 px-1.5 text-xs leading-none text-center whitespace-nowrap align-baseline border font-bold ${
-            selected
-              ? " bg-white text-orange-600 border-orange-600"
-              : "bg-orange-600 text-black"
-          } rounded-full z-10`}
-        >
-          {abbreviateNumber(total)}
-        </div>
-      )}
-    </div>
+    </Badge>
   );
 }
diff --git a/pages/search.js b/pages/search.js
index 1ba46bf0ac6..2ab8dd7c378 100755
--- a/pages/search.js
+++ b/pages/search.js
@@ -6,6 +6,7 @@ import Alert from "../components/Alert";
 import Page from "../components/Page";
 import PageHead from "../components/PageHead";
 import Tag from "../components/Tag";
+import Badge from "../components/Badge";
 
 export async function getServerSideProps(context) {
   let data = {
@@ -134,14 +135,19 @@ export default function Search({ data }) {
                   name={tag.name}
                   total={tag.total}
                   selected={inputValue
-                    .toLowerCase().split(',')
+                    .toLowerCase()
+                    .split(",")
                     .includes(tag.name.toLowerCase())}
                   onClick={() => search(tag.name)}
                 />
               ))}
         </div>
 
-        <div className="relative">
+        <Badge
+          content={filteredUsers.length}
+          display={!!filteredUsers}
+          className="w-full"
+        >
           <input
             placeholder="Search user by name or tags; eg: open source,reactjs"
             ref={inputRef}
@@ -150,12 +156,7 @@ export default function Search({ data }) {
             value={inputValue}
             onChange={(e) => setInputValue(e.target.value)}
           />
-          {filteredUsers && (
-            <div className="absolute inline-block top-0 right-0 bottom-auto left-auto translate-x-1/4 -translate-y-1/3 rotate-0 skew-x-0 skew-y-0 scale-x-100 scale-y-100 py-1 px-1.5 text-xs leading-none text-center whitespace-nowrap align-baseline font-bold bg-orange-600 text-black rounded-full z-10">
-              {filteredUsers.length}
-            </div>
-          )}
-        </div>
+        </Badge>
 
         {notFound && <Alert type="error" message={`${notFound} not found`} />}
 

From 843411a223baa4aaae4fe9563cb8832c45412340 Mon Sep 17 00:00:00 2001
From: Eddie Jaoude <eddie@jaoudestudios.com>
Date: Sat, 11 Feb 2023 15:11:36 +0700
Subject: [PATCH 3/4] feat: profile use badge component

---
 components/Badge.js            |  8 ++++----
 components/user/UserProfile.js | 17 ++++++++---------
 2 files changed, 12 insertions(+), 13 deletions(-)

diff --git a/components/Badge.js b/components/Badge.js
index d83a591162d..9543eb1bd75 100644
--- a/components/Badge.js
+++ b/components/Badge.js
@@ -1,7 +1,4 @@
-// profile photo numbers/stats
 // QR code?
-// discover tag
-// user card
 
 import Link from "./Link";
 
@@ -11,8 +8,10 @@ export default function Badge({
   path,
   position,
   className,
+  badgeClassName,
   children,
   display = true,
+  onClick,
 }) {
   let css = "";
   const cssTopRight = "top-0 right-0 bottom-auto left-auto";
@@ -39,7 +38,8 @@ export default function Badge({
   const badge = (
     <div
       title={title}
-      className={`absolute inline-block translate-x-2/4 -translate-y-1/2 rotate-0 skew-x-0 skew-y-0 scale-x-100 scale-y-100 py-1 px-1.5 text-xs leading-none text-center whitespace-nowrap align-baseline font-bold bg-orange-600 text-black rounded-full z-10 ${css}`}
+      className={`absolute inline-block translate-x-2/4 -translate-y-1/2 rotate-0 skew-x-0 skew-y-0 scale-x-100 scale-y-100 py-1 px-1.5 text-xs leading-none text-center whitespace-nowrap align-baseline font-bold bg-orange-600 text-black rounded-full z-10 ${css} ${badgeClassName}`}
+      onClick={() => (onClick ? onClick() : null)}
     >
       {content}
     </div>
diff --git a/components/user/UserProfile.js b/components/user/UserProfile.js
index 9ea87e225a5..02fa905a1ee 100644
--- a/components/user/UserProfile.js
+++ b/components/user/UserProfile.js
@@ -6,8 +6,8 @@ import { QRCodeSVG } from "qrcode.react";
 import FallbackImage from "../FallbackImage";
 import UserSocial from "./UserSocials";
 import Tag from "../Tag";
-import { abbreviateNumber } from "../../services/utils/abbreviateNumbers";
 import Link from "../Link";
+import Badge from "../Badge";
 
 export default function UserProfile({ BASE_URL, data }) {
   const [qrShow, setQrShow] = useState(false);
@@ -15,7 +15,12 @@ export default function UserProfile({ BASE_URL, data }) {
   return (
     <>
       <div className="flex justify-center items-center flex-col md:flex-row gap-x-6">
-        <div className="inline-flex relative w-fit">
+        <Badge
+          content={<MdQrCode2 size="2em" />}
+          position="bottom-left"
+          badgeClassName="animate-bounce cursor-pointer"
+          onClick={() => (qrShow ? setQrShow(false) : setQrShow(true))}
+        >
           <FallbackImage
             src={`https://github.com/${data.username}.png`}
             alt={`Profile picture of ${data.name}`}
@@ -24,13 +29,7 @@ export default function UserProfile({ BASE_URL, data }) {
             fallback={data.name}
             className="rounded-full object-contain"
           />
-          <div
-            className="absolute inline-block bottom-0 left-0 top-auto right-auto translate-y-2/4 -translate-x-1/2 rotate-0 skew-x-0 skew-y-0 scale-x-100 scale-y-100 px-2 py-2 text-xs leading-none text-center whitespace-nowrap align-baseline font-bold border-2 border-orange-600 rounded-xl z-10 animate-bounce text-orange-600 cursor-pointer"
-            onClick={() => (qrShow ? setQrShow(false) : setQrShow(true))}
-          >
-            <MdQrCode2 />
-          </div>
-        </div>
+        </Badge>
 
         <div className="flex flex-col self-center gap-3">
           <h1 className="text-3xl font-bold">{data.name}</h1>

From 7dd6105ec98aeed79656241fb3ccf8b95f4865ed Mon Sep 17 00:00:00 2001
From: Eddie Jaoude <eddie@jaoudestudios.com>
Date: Sat, 11 Feb 2023 15:12:35 +0700
Subject: [PATCH 4/4] fix: remove comment

---
 components/Badge.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/components/Badge.js b/components/Badge.js
index 9543eb1bd75..d4c6a6e5636 100644
--- a/components/Badge.js
+++ b/components/Badge.js
@@ -1,5 +1,3 @@
-// QR code?
-
 import Link from "./Link";
 
 export default function Badge({