[resumes][feat] add scaffold for resume badges

apps/portal/src/components/resumes/badgeIcons/reviewer/BronzeReviewerBadgeIcon.tsx

@@ -1,7 +1,12 @@
-export default function BronzeReviewerBadgeIcon() {
+type Props = Readonly<{
+  className: string;
+}>;
+
+export default function BronzeReviewerBadgeIcon({ className }: Props) {
   return (
     <svg
       aria-hidden="true"
+      className={className}
       height="36px"
       preserveAspectRatio="xMidYMid meet"
       viewBox="0 0 36 36"

apps/portal/src/components/resumes/badgeIcons/reviewer/GoldReviewerBadgeIcon.tsx

@@ -1,7 +1,12 @@
-export default function GoldReviewerBadgeIcon() {
+type Props = Readonly<{
+  className: string;
+}>;
+
+export default function GoldReviewerBadgeIcon({ className }: Props) {
   return (
     <svg
       aria-hidden="true"
+      className={className}
       height="36px"
       preserveAspectRatio="xMidYMid meet"
       role="img"

apps/portal/src/components/resumes/badgeIcons/reviewer/SilverReviewerBadgeIcon.tsx

@@ -1,7 +1,12 @@
-export default function SilverReviewerBadgeIcon() {
+type Props = Readonly<{
+  className: string;
+}>;
+
+export default function SilverReviewerBadgeIcon({ className }: Props) {
   return (
     <svg
       aria-hidden="true"
+      className={className}
       height="36px"
       preserveAspectRatio="xMidYMid meet"
       role="img"

apps/portal/src/components/resumes/badges/ResumeUserBadge.tsx

@@ -0,0 +1,31 @@
+import type { BadgeIcon } from './resumeBadgeConstants';
+
+type Props = Readonly<{
+  description: string;
+  icon: BadgeIcon;
+  toolTip: string;
+}>;
+
+export default function ResumeUserBadge({
+  description,
+  icon: Icon,
+  toolTip,
+}: Props) {
+  return (
+    <div className="group">
+      <div
+        className="absolute left-16 -top-1 hidden w-64 -translate-y-full flex-col justify-center
+        rounded-lg bg-slate-50 px-2 py-2 text-center shadow-md
+       after:absolute after:left-1/2 after:top-[100%]
+       after:-translate-x-1/2 after:border-8 after:border-x-transparent
+       after:border-b-transparent after:border-t-slate-50
+       after:content-['']
+       group-hover:flex">
+        <Icon className="text-center" />
+        <p className="text-lg font-medium">{toolTip}</p>
+        <p className="text-sm font-light">{description}</p>
+      </div>
+      <Icon className="h-3 w-3" />
+    </div>
+  );
+}

apps/portal/src/components/resumes/badges/ResumeUserBadges.tsx

@@ -0,0 +1,36 @@
+import { trpc } from '~/utils/trpc';
+
+import type { BadgePayload } from './resumeBadgeConstants';
+import { RESUME_USER_BADGES } from './resumeBadgeConstants';
+import ResumeUserBadge from './ResumeUserBadge';
+
+type Props = Readonly<{
+  userId: string;
+}>;
+
+export default function ResumeUserBadges({ userId }: Props) {
+  const userReviewedResumesCountQuery = trpc.useQuery([
+    'resumes.resume.findUserReviewedResumeCount',
+    { userId },
+  ]);
+
+  // TODO: Add other badges in
+  const payload: BadgePayload = {
+    reviewedResumesCount: userReviewedResumesCountQuery.data ?? 0,
+  };
+
+  return (
+    <>
+      {RESUME_USER_BADGES.filter((badge) => badge.isValid(payload)).map(
+        (badge) => (
+          <ResumeUserBadge
+            key={badge.id}
+            description={badge.description}
+            icon={badge.icon}
+            toolTip={badge.toolTip}
+          />
+        ),
+      )}
+    </>
+  );
+}

apps/portal/src/components/resumes/badges/resumeBadgeConstants.ts

@@ -0,0 +1,57 @@
+import BronzeReviewerBadgeIcon from '../badgeIcons/reviewer/BronzeReviewerBadgeIcon';
+import GoldReviewerBadgeIcon from '../badgeIcons/reviewer/GoldReviewerBadgeIcon';
+import SilverReviewerBadgeIcon from '../badgeIcons/reviewer/SilverReviewerBadgeIcon';
+
+export type BadgeIcon = (
+  props: React.ComponentProps<
+    | typeof BronzeReviewerBadgeIcon
+    | typeof GoldReviewerBadgeIcon
+    | typeof SilverReviewerBadgeIcon
+  >,
+) => JSX.Element;
+
+export type BadgeInfo = {
+  description: string;
+  icon: BadgeIcon;
+  id: string;
+  isValid: (payload: BadgePayload) => boolean;
+  toolTip: string;
+};
+
+// TODO: Add other badges in
+export type BadgePayload = {
+  reviewedResumesCount: number;
+};
+
+const GOLD_TIER = 20;
+const SILVER_TIER = 10;
+const BRONZE_TIER = 5;
+
+export const RESUME_USER_BADGES: Array<BadgeInfo> = [
+  {
+    description: `User has reviewed over ${GOLD_TIER} resumes`,
+    icon: GoldReviewerBadgeIcon,
+    id: 'Superhero',
+    isValid: (payload: BadgePayload) =>
+      payload.reviewedResumesCount >= GOLD_TIER,
+    toolTip: 'True saviour of the people',
+  },
+  {
+    description: `User has reviewed over ${SILVER_TIER} resumes`,
+    icon: SilverReviewerBadgeIcon,
+    id: 'Detective',
+    isValid: (payload: BadgePayload) =>
+      payload.reviewedResumesCount >= SILVER_TIER &&
+      payload.reviewedResumesCount < GOLD_TIER,
+    toolTip: 'Keen eye for details like a private eye',
+  },
+  {
+    description: `User has reviewed over ${BRONZE_TIER} resumes`,
+    icon: BronzeReviewerBadgeIcon,
+    id: 'Eagle',
+    isValid: (payload: BadgePayload) =>
+      payload.reviewedResumesCount >= BRONZE_TIER &&
+      payload.reviewedResumesCount < SILVER_TIER,
+    toolTip: 'As sharp as an eagle',
+  },
+];

apps/portal/src/components/resumes/comments/ResumeCommentListItem.tsx

@@ -13,7 +13,7 @@ import { Button, TextArea } from '@tih/ui';
 
 import { trpc } from '~/utils/trpc';
 
-import ResumeUserBadges from './ResumeUserBadges';
+import ResumeUserBadges from '../badges/ResumeUserBadges';
 import ResumeExpandableText from '../shared/ResumeExpandableText';
 
 import type { ResumeComment } from '~/types/resume-comments';

apps/portal/src/components/resumes/comments/ResumeUserBadges.tsx

@@ -1,61 +0,0 @@
-import { Badge } from '@tih/ui';
-
-import { trpc } from '~/utils/trpc';
-
-type Props = {
-  userId: string;
-};
-
-type BadgeInfo = {
-  description: string;
-  id: string;
-  isValid: (userId: string) => boolean;
-  label: string;
-};
-
-const badges: Array<BadgeInfo> = [
-  {
-    description: 'User has reviewed over 50 resumes',
-    id: 'VeteranReviewer',
-    isValid: (userId: string) => {
-      const userReviewedResumesCountQuery = trpc.useQuery([
-        'resumes.resume.findUserReviewedResumeCount',
-        { userId },
-      ]);
-
-      return (
-        userReviewedResumesCountQuery.data != null &&
-        userReviewedResumesCountQuery.data >= 5
-      );
-    },
-    label: 'Veteran',
-  },
-  {
-    description: 'User has reviewed over 50 resumes',
-    id: 'NoviceReviewer',
-    isValid: (userId: string) => {
-      const userReviewedResumesCountQuery = trpc.useQuery([
-        'resumes.resume.findUserReviewedResumeCount',
-        { userId },
-      ]);
-
-      return (
-        userReviewedResumesCountQuery.data != null &&
-        userReviewedResumesCountQuery.data >= 2
-      );
-    },
-    label: 'Veteran',
-  },
-];
-
-export default function ResumeUserBadges({ userId }: Props) {
-  return (
-    <>
-      {badges
-        .filter((badge) => badge.isValid(userId))
-        .map((badge) => (
-          <Badge key={badge.id} label={badge.label} variant="primary" />
-        ))}
-    </>
-  );
-}