fix: remove link from highlight card component (#435)

* fix: remove link from highlight card component * fix: eslint errors
open-sauced · Sep 26, 2022 · 25b6997 · 25b6997
1 parent 004e32c
commit 25b6997
Show file tree

Hide file tree

Showing 2 changed files with 100 additions and 72 deletions.
diff --git a/components/molecules/HighlightCard/highlight-card.tsx b/components/molecules/HighlightCard/highlight-card.tsx
@@ -9,22 +9,22 @@ import Link from "next/link";
 import Card from "components/atoms/Card/card";
 
 interface HighlightCardProps {
-    className?: string;
-    label?: string;
-    icon?: "participation" | "accepted-pr" | "unlabeled-pr" | "spam";
-    metricIncreases: boolean;
-    increased?: boolean;
-    numChanged?: number;
-    percentage?: number;
-    percentageLabel?: string;
-    url?: string | object;
+  className?: string;
+  label?: string;
+  icon?: "participation" | "accepted-pr" | "unlabeled-pr" | "spam";
+  metricIncreases: boolean;
+  increased?: boolean;
+  numChanged?: number;
+  percentage?: number;
+  percentageLabel?: string;
+
 }
 
 // TO-DO:
 // Replace these icons, or make them dynamic.
 // Maybe create an Icon component.
 const icons = {
-  "participation": {
+  participation: {
     src: repoIcon.src,
     label: "Participation",
     color: "bg-blue-100"
@@ -39,78 +39,106 @@ const icons = {
     label: "Unlabeled PRs",
     color: "bg-cyan-100"
   },
-  "spam": {
+  spam: {
     src: thumbsIcon.src,
     label: "Spam",
     color: "bg-orange-100"
   }
 };
 
-const HighlightCard: React.FC<HighlightCardProps> = ({ className, label, icon, metricIncreases, increased, numChanged, percentage, percentageLabel, url }) => {
+const HighlightCard: React.FC<HighlightCardProps> = ({
+  className,
+  label,
+  icon,
+  metricIncreases,
+  increased,
+  numChanged,
+  percentage,
+  percentageLabel
+}) => {
   return (
-    <Link href={url ? url : "#"}>
-
-      <Card className={`${className ? className : ""} flex flex-col w-full sm:max-w-[calc(50%-(1rem/2))] h-auto ${url ? "cursor-pointer " : ""}`}>
-        <>
-          {/* Top Information */}
-          <div className="flex justify-between w-full p-1">
-            {/* Label */}
-            <div className="flex items-center gap-2">
-              {/* Label: Icon */}
-              <div className={`w-8 h-8 flex justify-center items-center ${icon ? icons[icon].color : "bg-slate-100"} rounded-full`}>
-                <Image 
-                  width={16} height={16}
-                  alt={icon ? icons[icon].label : "Icon"} 
-                  src={icon ? icons[icon].src : "Icon"} />
-              </div>
-              {/* Label: Text */}
-              <div className="text-sm text-slate-600 font-medium leading-none">
-                { label ? label : "Label" }
-              </div>
+    <Card
+      className={`${className ? className : ""} flex flex-col w-full sm:max-w-[calc(50%-(1rem/2))] h-auto `}
+    >
+      <>
+        {/* Top Information */}
+        <div className="flex justify-between w-full p-1">
+          {/* Label */}
+          <div className="flex items-center gap-2">
+            {/* Label: Icon */}
+            <div
+              className={`w-8 h-8 flex justify-center items-center ${
+                icon ? icons[icon].color : "bg-slate-100"
+              } rounded-full`}
+            >
+              <Image
+                width={16}
+                height={16}
+                alt={icon ? icons[icon].label : "Icon"}
+                src={icon ? icons[icon].src : "Icon"}
+              />
             </div>
+            {/* Label: Text */}
+            <div className="text-sm text-slate-600 font-medium leading-none">{label ? label : "Label"}</div>
+          </div>
 
-            {/* Last Updated Information */}
-            <div className="flex items-center gap-1">
-              {/* Last Updated: Number */}
-              <div className="text-sm text-slate-600 font-medium leading-none">
-                { numChanged ? numChanged : 0 } 
-              </div>
-              {/* Last Updated: Icon */}
-              <Image 
-                width={14} height={14}
-                alt={(increased ? "Increased " : "Decreased ") + label + " by" + numChanged} 
-                src={metricArrow.src} 
-                className={`${increased ? "" : "rotate-180"}`} />
-            </div>
+          {/* Last Updated Information */}
+          <div className="flex items-center gap-1">
+            {/* Last Updated: Number */}
+            <div className="text-sm text-slate-600 font-medium leading-none">{numChanged ? numChanged : 0}</div>
+            {/* Last Updated: Icon */}
+            <Image
+              width={14}
+              height={14}
+              alt={(increased ? "Increased " : "Decreased ") + label + " by" + numChanged}
+              src={metricArrow.src}
+              className={`${increased ? "" : "rotate-180"}`}
+            />
           </div>
+        </div>
 
-          {/* Main Information */}
-          <div className="flex flex-col w-full px-6 pb-5 mt-2">
-            {/* Main Number */}
-            <div className="flex flex-col items-center">
-              {/* Percentage */}
-              <div className="text-4xl font-normal">
-                { percentage ? percentage : 0 }%
-              </div>
-
-              {/* Label */}
-              <div className="text-base font-medium text-slate-600 mt-0.5">
-                { percentageLabel ? percentageLabel : "Label"}
-              </div>
-            </div>
+        {/* Main Information */}
+        <div className="flex flex-col w-full px-6 pb-5 mt-2">
+          {/* Main Number */}
+          <div className="flex flex-col items-center">
+            {/* Percentage */}
+            <div className="text-4xl font-normal">{percentage ? percentage : 0}%</div>
 
-            {/* Progress Bar */}
-            <div className={`flex items-center w-full rounded-full mt-7 ${(percentage && (percentage > 0 || percentage < 99)) ? "gap-2" : ""}`}>
-              <div className={`${metricIncreases ? (percentage && percentage > 70 ? "bg-green-500" : percentage && percentage > 30 ? "bg-yellow-500" : "bg-red-500") : (percentage && percentage > 70 ? "bg-red-500" : percentage && percentage > 30 ? "bg-yellow-500" : "bg-green-500")} h-3 rounded-full transition-all duration-500 ease-in-out`}
-                style={{width: (percentage ? percentage : 0) + "%"}}></div>
-
-              <div className="bg-gray-200 w-auto flex-auto h-3 rounded-full transition-all duration-500 ease-in-out"></div>
+            {/* Label */}
+            <div className="text-base font-medium text-slate-600 mt-0.5">
+              {percentageLabel ? percentageLabel : "Label"}
             </div>
           </div>
-        </>
-      </Card>
-    </Link>
+
+          {/* Progress Bar */}
+          <div
+            className={`flex items-center w-full rounded-full mt-7 ${
+              percentage && (percentage > 0 || percentage < 99) ? "gap-2" : ""
+            }`}
+          >
+            <div
+              className={`${
+                metricIncreases
+                  ? percentage && percentage > 70
+                    ? "bg-green-500"
+                    : percentage && percentage > 30
+                      ? "bg-yellow-500"
+                      : "bg-red-500"
+                  : percentage && percentage > 70
+                    ? "bg-red-500"
+                    : percentage && percentage > 30
+                      ? "bg-yellow-500"
+                      : "bg-green-500"
+              } h-3 rounded-full transition-all duration-500 ease-in-out`}
+              style={{ width: (percentage ? percentage : 0) + "%" }}
+            ></div>
+
+            <div className="bg-gray-200 w-auto flex-auto h-3 rounded-full transition-all duration-500 ease-in-out"></div>
+          </div>
+        </div>
+      </>
+    </Card>
   );
 };
 
-export default HighlightCard;
+export default HighlightCard;
diff --git a/components/organisms/Dashboard/dashboard.tsx b/components/organisms/Dashboard/dashboard.tsx
@@ -145,7 +145,7 @@ export const Dashboard = (): JSX.Element => {
     <div className="flex flex-col w-full gap-4">
       <section className="flex flex-wrap gap-4 items-center lg:flex-row lg:flex-nowrap max-w-full">
         <HighlightCard
-          url="/hacktoberfest/people"
+
           label="Participation"
           icon="participation"
           metricIncreases={true}
@@ -155,7 +155,7 @@ export const Dashboard = (): JSX.Element => {
           percentageLabel={itemCountText}
         />
         <HighlightCard
-          url="/hacktoberfest/pull%20requests"
+
           label="Spam"
           icon="spam"
           metricIncreases={false}
@@ -165,7 +165,7 @@ export const Dashboard = (): JSX.Element => {
           percentageLabel={itemCountText}
         />
         <HighlightCard
-          url="/hacktoberfest/pull%20requests"
+
           label="Accepted PRs"
           icon="accepted-pr"
           metricIncreases={true}
@@ -175,7 +175,7 @@ export const Dashboard = (): JSX.Element => {
           percentageLabel={itemCountText}
         />
         <HighlightCard
-          url="/hacktoberfest/pull%20requests"
+
           label="Unlabeled PRs"
           icon="unlabeled-pr"
           metricIncreases={false}