algorithm/tech-interview-handbook
1
0
Fork 0
mirror of https://github.com/yangshun/tech-interview-handbook.git synced 2025-07-28 20:52:00 +08:00
Code Issues Packages Projects Releases Wiki Activity

[resumes][feat] improve badge UI

Browse Source
This commit is contained in:
Keane Chan
2022-10-24 23:56:14 +08:00
parent 98e422953c
commit 4de0a1f681
1 changed files with 9 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
apps/portal/src/components/resumes/badges/ResumeUserBadge.tsx
View File

@ -14,18 +14,20 @@ export default function ResumeUserBadge({
return (
<div className="group relative flex items-center justify-center">
<div
className="absolute left-6 z-10 hidden w-48 flex-col
justify-center gap-1 rounded-xl bg-white px-2 py-2 text-center drop-shadow-lg
className="h-34 absolute left-6 z-10 hidden w-48 flex-col justify-center
gap-1 rounded-xl bg-white pb-2 text-center drop-shadow-lg
before:absolute before:top-12 before:-translate-x-6
before:absolute before:top-14 before:-translate-x-4
before:border-8 before:border-y-transparent before:border-l-transparent
before:border-r-white before:drop-shadow-lg before:content-['']
group-hover:flex">
<Icon className="h-12 w-12 self-center" />
<p className="font-medium">{title}</p>
<p className="text-sm">{description}.</p>
<Icon className="h-16 w-full self-center rounded-t-xl bg-slate-200 py-2" />
<div className="px-2">
<p className="font-medium">{title}</p>
<p className="text-sm">{description}.</p>
</div>
</div>
<Icon className="h-4 w-4" />
<Icon className="h-5 w-5 rounded-xl border bg-slate-200 shadow-sm" />
</div>
);
}