diff --git a/apps/portal/src/components/resumes/badgeIcons/popularResumes/ResumeBadgeCoolIcon.tsx b/apps/portal/src/components/resumes/badgeIcons/popularResumes/ResumeBadgeCoolIcon.tsx new file mode 100644 index 00000000..47ac2dad --- /dev/null +++ b/apps/portal/src/components/resumes/badgeIcons/popularResumes/ResumeBadgeCoolIcon.tsx @@ -0,0 +1,68 @@ +import type { ResumeBadgeProps } from '../resume-badge'; + +export default function ResumeBadgeCoolIcon({ className }: ResumeBadgeProps) { + return ( + + ); +} diff --git a/apps/portal/src/components/resumes/badgeIcons/popularResumes/ResumeBadgeRocketIcon.tsx b/apps/portal/src/components/resumes/badgeIcons/popularResumes/ResumeBadgeRocketIcon.tsx new file mode 100644 index 00000000..c7545311 --- /dev/null +++ b/apps/portal/src/components/resumes/badgeIcons/popularResumes/ResumeBadgeRocketIcon.tsx @@ -0,0 +1,78 @@ +import type { ResumeBadgeProps } from '../resume-badge'; + +export default function ResumeBadgeRocketIcon({ className }: ResumeBadgeProps) { + return ( + + ); +} diff --git a/apps/portal/src/components/resumes/badgeIcons/popularResumes/ResumeBadgeTreasureIcon.tsx b/apps/portal/src/components/resumes/badgeIcons/popularResumes/ResumeBadgeTreasureIcon.tsx new file mode 100644 index 00000000..a5eddfd7 --- /dev/null +++ b/apps/portal/src/components/resumes/badgeIcons/popularResumes/ResumeBadgeTreasureIcon.tsx @@ -0,0 +1,198 @@ +import type { ResumeBadgeProps } from '../resume-badge'; + +export default function ResumeBadgeTreasureIcon({ + className, +}: ResumeBadgeProps) { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} diff --git a/apps/portal/src/components/resumes/badgeIcons/resume-badge.d.ts b/apps/portal/src/components/resumes/badgeIcons/resume-badge.d.ts new file mode 100644 index 00000000..f73d9281 --- /dev/null +++ b/apps/portal/src/components/resumes/badgeIcons/resume-badge.d.ts @@ -0,0 +1,3 @@ +export type ResumeBadgeProps = Readonly<{ + className: string; +}>; diff --git a/apps/portal/src/components/resumes/badgeIcons/reviewer/ResumeBadgeDetectiveIcon.tsx b/apps/portal/src/components/resumes/badgeIcons/reviewer/ResumeBadgeDetectiveIcon.tsx index bf9319f1..053d9497 100644 --- a/apps/portal/src/components/resumes/badgeIcons/reviewer/ResumeBadgeDetectiveIcon.tsx +++ b/apps/portal/src/components/resumes/badgeIcons/reviewer/ResumeBadgeDetectiveIcon.tsx @@ -1,8 +1,8 @@ -type Props = Readonly<{ - className: string; -}>; +import type { ResumeBadgeProps } from '../resume-badge'; -export default function ResumeBadgeDetectiveIcon({ className }: Props) { +export default function ResumeBadgeDetectiveIcon({ + className, +}: ResumeBadgeProps) { return (
- +

{title}

-

{description}

+

{description}.

diff --git a/apps/portal/src/components/resumes/badges/ResumeUserBadges.tsx b/apps/portal/src/components/resumes/badges/ResumeUserBadges.tsx index 0e621599..9d0a9795 100644 --- a/apps/portal/src/components/resumes/badges/ResumeUserBadges.tsx +++ b/apps/portal/src/components/resumes/badges/ResumeUserBadges.tsx @@ -16,7 +16,9 @@ export default function ResumeUserBadges({ userId }: Props) { // TODO: Add other badges in const payload: BadgePayload = { + maxResumeUpvoteCount: 10, reviewedResumesCount: userReviewedResumesCountQuery.data ?? 0, + topUpvotedCommentCount: 10, }; return ( diff --git a/apps/portal/src/components/resumes/badges/resumeBadgeConstants.ts b/apps/portal/src/components/resumes/badges/resumeBadgeConstants.ts index 0c806437..2c41dc5e 100644 --- a/apps/portal/src/components/resumes/badges/resumeBadgeConstants.ts +++ b/apps/portal/src/components/resumes/badges/resumeBadgeConstants.ts @@ -1,13 +1,15 @@ +import ResumeBadgeCoolIcon from '../badgeIcons/popularResumes/ResumeBadgeCoolIcon'; +import ResumeBadgeRocketIcon from '../badgeIcons/popularResumes/ResumeBadgeRocketIcon'; +import ResumeBadgeTreasureIcon from '../badgeIcons/popularResumes/ResumeBadgeTreasureIcon'; import ResumeBadgeDetectiveIcon from '../badgeIcons/reviewer/ResumeBadgeDetectiveIcon'; import ResumeBadgeEagleIcon from '../badgeIcons/reviewer/ResumeBadgeEagleIcon'; import ResumeBadgeSuperheroIcon from '../badgeIcons/reviewer/ResumeBadgeSuperheroIcon'; +import ResumeBadgeBookIcon from '../badgeIcons/topComment/ResumeBadgeBookIcon'; +import ResumeBadgeOwlIcon from '../badgeIcons/topComment/ResumeBadgeOwlIcon'; +import ResumeBadgeSageIcon from '../badgeIcons/topComment/ResumeBadgeSageIcon'; export type BadgeIcon = ( - props: React.ComponentProps< - | typeof ResumeBadgeDetectiveIcon - | typeof ResumeBadgeEagleIcon - | typeof ResumeBadgeSuperheroIcon - >, + props: React.ComponentProps, ) => JSX.Element; export type BadgeInfo = { @@ -20,7 +22,9 @@ export type BadgeInfo = { // TODO: Add other badges in export type BadgePayload = { + maxResumeUpvoteCount: number; reviewedResumesCount: number; + topUpvotedCommentCount: number; }; const TIER_THREE = 20; @@ -29,7 +33,7 @@ const TIER_ONE = 5; export const RESUME_USER_BADGES: Array = [ { - description: `Reviewed over ${TIER_ONE} resumes`, + description: `Reviewed over ${TIER_THREE} resumes`, icon: ResumeBadgeSuperheroIcon, id: 'Superhero', isValid: (payload: BadgePayload) => @@ -46,7 +50,7 @@ export const RESUME_USER_BADGES: Array = [ title: 'Keen eye for details like a private eye', }, { - description: `Reviewed over ${TIER_THREE} resumes`, + description: `Reviewed over ${TIER_ONE} resumes`, icon: ResumeBadgeEagleIcon, id: 'Eagle', isValid: (payload: BadgePayload) => @@ -54,4 +58,56 @@ export const RESUME_USER_BADGES: Array = [ payload.reviewedResumesCount < TIER_TWO, title: 'As sharp as an eagle', }, + { + description: `${TIER_THREE} upvotes on a resume`, + icon: ResumeBadgeRocketIcon, + id: 'Rocket', + isValid: (payload: BadgePayload) => + payload.maxResumeUpvoteCount >= TIER_THREE, + title: 'To the moon!', + }, + { + description: `${TIER_TWO} upvotes on a resume`, + icon: ResumeBadgeTreasureIcon, + id: 'Treasure', + isValid: (payload: BadgePayload) => + payload.maxResumeUpvoteCount >= TIER_TWO && + payload.maxResumeUpvoteCount < TIER_THREE, + title: "Can't get enough of this!", + }, + { + description: `${TIER_ONE} upvotes on a resume`, + icon: ResumeBadgeCoolIcon, + id: 'Cool', + isValid: (payload: BadgePayload) => + payload.maxResumeUpvoteCount >= TIER_ONE && + payload.maxResumeUpvoteCount < TIER_TWO, + title: 'Like the cool kids', + }, + { + description: `${TIER_THREE} top upvoted comment`, + icon: ResumeBadgeSageIcon, + id: 'Sage', + isValid: (payload: BadgePayload) => + payload.topUpvotedCommentCount >= TIER_THREE, + title: 'I am wisdom.', + }, + { + description: `${TIER_TWO} top upvoted comment`, + icon: ResumeBadgeBookIcon, + id: 'Book', + isValid: (payload: BadgePayload) => + payload.topUpvotedCommentCount >= TIER_TWO && + payload.topUpvotedCommentCount < TIER_THREE, + title: 'The walking encyclopaedia', + }, + { + description: `${TIER_ONE} top upvoted comment`, + icon: ResumeBadgeOwlIcon, + id: 'Owl', + isValid: (payload: BadgePayload) => + payload.topUpvotedCommentCount >= TIER_ONE && + payload.topUpvotedCommentCount < TIER_TWO, + title: 'Wise as an owl', + }, ];