fix: refactor badges to component (#4479)

* fix: refactor badges to component * fix: refactored search to use new badge component * feat: profile use badge component * fix: remove comment
EddieHubCommunity · Feb 12, 2023 · 9fb02a0 · 9fb02a0
1 parent 7e07999
commit 9fb02a0
Show file tree

Hide file tree

Showing 6 changed files with 84 additions and 59 deletions.
diff --git a/components/Badge.js b/components/Badge.js
@@ -0,0 +1,57 @@
+import Link from "./Link";
+
+export default function Badge({
+  title,
+  content,
+  path,
+  position,
+  className,
+  badgeClassName,
+  children,
+  display = true,
+  onClick,
+}) {
+  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;
+  }
+
+  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} ${badgeClassName}`}
+      onClick={() => (onClick ? onClick() : null)}
+    >
+      {content}
+    </div>
+  );
+
+  let clickable;
+  if (path) {
+    clickable = <Link href={path}>{badge}</Link>;
+  }
+
+  return (
+    <div className={`inline-flex relative ${className ? className : "w-fit"}`}>
+      {children}
+      {display && (clickable ? clickable : badge)}
+    </div>
+  );
+}
diff --git 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/components/hint/HintIcon.js b/components/hint/HintIcon.js
diff --git a/components/user/UserProfile.js b/components/user/UserProfile.js
@@ -6,16 +6,21 @@ 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);
   const fallbackImageSize = 120;
   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>

diff --git 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}

diff --git a/pages/search.js b/pages/search.js
@@ -5,6 +5,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 = {
@@ -137,7 +138,11 @@ export default function Search({ data }) {
               ))}
         </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}
@@ -146,12 +151,8 @@ 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`} />}
         <ul className="flex flex-wrap gap-3 justify-center mt-[3rem]">
           {filteredUsers.map((user) => (