[resumes][feat] move badge to the right instead

This commit is contained in:
Keane Chan
2022-10-24 21:55:21 +08:00
parent e5c2082bf2
commit 64cd69d024
2 changed files with 9 additions and 8 deletions

View File

@ -14,11 +14,12 @@ export default function ResumeUserBadge({
return ( return (
<div className="group relative flex items-center justify-center"> <div className="group relative flex items-center justify-center">
<div <div
className="absolute -top-3 hidden w-48 -translate-y-full flex-col className="absolute left-6 z-10 hidden w-48 flex-col
justify-center gap-1 rounded-lg bg-white px-2 py-2 text-center drop-shadow-xl justify-center gap-1 rounded-xl bg-white px-2 py-2 text-center drop-shadow-lg
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 before:absolute before:top-12 before:-translate-x-6
after:border-t-white after:drop-shadow-lg after:content-[''] before:border-8 before:border-y-transparent before:border-l-transparent
before:border-r-white before:drop-shadow-lg before:content-['']
group-hover:flex"> group-hover:flex">
<Icon className="h-12 w-12 self-center" /> <Icon className="h-12 w-12 self-center" />
<p className="font-medium">{title}</p> <p className="font-medium">{title}</p>

View File

@ -33,7 +33,7 @@ const TIER_ONE = 5;
export const RESUME_USER_BADGES: Array<BadgeInfo> = [ export const RESUME_USER_BADGES: Array<BadgeInfo> = [
{ {
description: `Reviewed over ${TIER_THREE} resumes`, description: `Reviewed ${TIER_THREE} resumes`,
icon: ResumeBadgeSuperheroIcon, icon: ResumeBadgeSuperheroIcon,
id: 'Superhero', id: 'Superhero',
isValid: (payload: BadgePayload) => isValid: (payload: BadgePayload) =>
@ -41,7 +41,7 @@ export const RESUME_USER_BADGES: Array<BadgeInfo> = [
title: 'True saviour of the people', title: 'True saviour of the people',
}, },
{ {
description: `Reviewed over ${TIER_TWO} resumes`, description: `Reviewed ${TIER_TWO} resumes`,
icon: ResumeBadgeDetectiveIcon, icon: ResumeBadgeDetectiveIcon,
id: 'Detective', id: 'Detective',
isValid: (payload: BadgePayload) => isValid: (payload: BadgePayload) =>
@ -50,7 +50,7 @@ export const RESUME_USER_BADGES: Array<BadgeInfo> = [
title: 'Keen eye for details like a private eye', title: 'Keen eye for details like a private eye',
}, },
{ {
description: `Reviewed over ${TIER_ONE} resumes`, description: `Reviewed ${TIER_ONE} resumes`,
icon: ResumeBadgeEagleIcon, icon: ResumeBadgeEagleIcon,
id: 'Eagle', id: 'Eagle',
isValid: (payload: BadgePayload) => isValid: (payload: BadgePayload) =>