rewards label supported

kudos-ink · Oct 14, 2024 · 3b1bed3 · 3b1bed3
1 parent e4cd69e
commit 3b1bed3
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 20 deletions.
diff --git a/app/projects/[slug]/_components/ProjectInfos.tsx b/app/projects/[slug]/_components/ProjectInfos.tsx
@@ -1,8 +1,9 @@
+import { Tooltip } from "@nextui-org/tooltip";
+import { Chip } from "@nextui-org/chip";
 import { KudosCertifiedIcon } from "@/assets/icons";
 import Emoji from "@/components/emoji";
 import { KUDOS_ISSUE_KEY } from "@/data/filters";
 import { ProjectInfosLabel } from "@/types/project";
-import { Chip } from "@nextui-org/chip";
 
 interface IProjectInfosProps {
   infos: { title: string; items: string[] }[];
@@ -13,21 +14,23 @@ const ProjectInfos = ({ infos, labels }: IProjectInfosProps) => (
   <div className="bg-gradient-to-r md:bg-gradient-to-l from-background to-background-200 to-80% py-5 px-6 border-[1px] rounded-md flex flex-col gap-4 h-full">
     {labels.length > 0 && (
       <div className="flex flex-col sm:flex-row gap-3 border-b-small pb-4">
-        {labels.map(({ color, emoji, label, type }, idx) => (
-          <Chip key={idx} color={color} className="rounded-md">
-            <div className="flex items-center font-semibold gap-2 !leading-none py-0.5 text-base">
-              {emoji && (
-                <>
-                  <Emoji emoji={emoji} className="text-xl" />
-                  &nbsp;
-                </>
-              )}
-              {type === KUDOS_ISSUE_KEY ? (
-                <KudosCertifiedIcon className="w-5 h-5" size={16} />
-              ) : null}
-              {label}
-            </div>
-          </Chip>
+        {labels.map(({ color, emoji, label, tooltip, type }, idx) => (
+          <Tooltip key={idx} content={tooltip}>
+            <Chip color={color} className="rounded-md">
+              <div className="flex items-center font-semibold gap-2 !leading-none py-0.5 text-base">
+                {emoji && (
+                  <>
+                    <Emoji emoji={emoji} className="text-xl" />
+                    &nbsp;
+                  </>
+                )}
+                {type === KUDOS_ISSUE_KEY ? (
+                  <KudosCertifiedIcon className="w-5 h-5" size={16} />
+                ) : null}
+                {label}
+              </div>
+            </Chip>
+          </Tooltip>
         ))}
       </div>
     )}

diff --git a/app/projects/[slug]/_helpers/infos.ts b/app/projects/[slug]/_helpers/infos.ts
@@ -1,20 +1,29 @@
 import { REWARDS_KEY, KUDOS_ISSUE_KEY } from "@/data/filters";
-import { ProjectInfosLabel, ProjectMetrics } from "@/types/project";
+import {
+  ProjectInfos,
+  ProjectInfosLabel,
+  ProjectMetrics,
+} from "@/types/project";
 
-export function constructLabels(metrics: ProjectMetrics): ProjectInfosLabel[] {
+export function constructLabels(
+  infos: ProjectInfos,
+  metrics: ProjectMetrics,
+): ProjectInfosLabel[] {
   const { certifiedTotal, rewardsTotal } = metrics;
 
   return [
-    rewardsTotal > 0 && {
+    infos.attributes.rewards && {
       color: "success",
       emoji: "💰",
       label: "Rewards",
       type: REWARDS_KEY,
+      tooltip: "This project is willing to distributed rewards (e.g. tipping)",
     },
     certifiedTotal > 0 && {
       color: "default",
       label: "Kudos Pick",
       type: KUDOS_ISSUE_KEY,
+      tooltip: "This project participates to the Kudos Carnival",
     },
   ].filter((label): label is ProjectInfosLabel => Boolean(label)); // Type-safe filtering
 }
diff --git a/app/projects/[slug]/page.tsx b/app/projects/[slug]/page.tsx
@@ -43,7 +43,7 @@ export default async function SingleProjectPage({ params }: IProps) {
   const issues = await fetchProjectIssues(slug, query);
   const metrics = await constructProjectMetrics(infos, issues);
 
-  const labels = constructLabels(metrics);
+  const labels = constructLabels(infos, metrics);
   const repositoryIds = getUniqueRepositoryIds(issues);
   const checkboxFilters = buildCheckboxFilters(metrics);
 

diff --git a/types/project.ts b/types/project.ts
@@ -36,6 +36,7 @@ export type ProjectInfos = {
     stackLevels: ProjectStackLevel[];
     technologies: ProjectTechnologies[];
     types: ProjectType[];
+    rewards: boolean;
   };
 };
 
@@ -51,6 +52,7 @@ export type ProjectInfosLabel = {
   color: "default" | "success" | "danger";
   emoji?: string;
   label: string;
+  tooltip: string;
   type: string;
 };