63 lines
2.5 KiB
JavaScript
63 lines
2.5 KiB
JavaScript
import React from 'react';
|
|
|
|
// Skill levels: Claimed → Practiced → Verified → Expert → Elite
|
|
const LEVELS = [
|
|
{ name: 'Claimed', fill: 35, bar: 'bg-[#CBD5E1]', text: 'text-[#94A3B8]' },
|
|
{ name: 'Practiced', fill: 62, bar: 'bg-[#93C5FD]', text: 'text-[#3B82F6]' },
|
|
{ name: 'Verified', fill: 84, bar: 'bg-[#0838E0]', text: 'text-[#0838E0]' },
|
|
{ name: 'Expert', fill: 94, bar: 'bg-[#6366F1]', text: 'text-[#6366F1]' },
|
|
{ name: 'Elite', fill: 100, bar: 'bg-[#F9E547]', text: 'text-[#92400E]' },
|
|
];
|
|
|
|
function levelFor(skill, badges, courses) {
|
|
const s = skill.toLowerCase();
|
|
const certHits = (badges || []).filter((b) => (b.name || '').toLowerCase().includes(s)).length;
|
|
const courseHits = (courses || []).filter((c) => (c.title || '').toLowerCase().includes(s)).length;
|
|
const score = certHits * 2 + courseHits;
|
|
if (score >= 6) return 4;
|
|
if (score >= 3) return 3;
|
|
if (certHits >= 1) return 2;
|
|
if (courseHits >= 1) return 1;
|
|
return 0;
|
|
}
|
|
|
|
export default function SkillDNA({ profile }) {
|
|
const skills = profile?.skills || [];
|
|
const badges = profile?.earned_badges || [];
|
|
const courses = profile?.completed_courses || [];
|
|
|
|
return (
|
|
<section className="py-12 sm:py-16 border-t border-[#F1F5F9]">
|
|
<h2 className="text-[22px] sm:text-[26px] font-semibold text-[#0F172A] tracking-tight">Skill DNA</h2>
|
|
<p className="text-[14px] text-[#64748B] mt-2 max-w-md">
|
|
Every shift updates these bars. Employers trust them.
|
|
</p>
|
|
|
|
{!skills.length ? (
|
|
<p className="text-[14px] text-[#94A3B8] mt-8">
|
|
Add skills to your profile to start tracking your Skill DNA.
|
|
</p>
|
|
) : (
|
|
<div className="mt-8 space-y-5 max-w-2xl">
|
|
{skills.map((sk, i) => {
|
|
const lvl = LEVELS[levelFor(sk, badges, courses)];
|
|
return (
|
|
<div key={i}>
|
|
<div className="flex items-center justify-between mb-1.5">
|
|
<span className="text-[14px] font-medium text-[#0F172A]">{sk}</span>
|
|
<span className={`text-[12px] font-medium ${lvl.text}`}>{lvl.name}</span>
|
|
</div>
|
|
<div className="h-2 rounded-full bg-[#F1F5F9] overflow-hidden">
|
|
<div
|
|
className={`h-full ${lvl.bar} rounded-full transition-all duration-500`}
|
|
style={{ width: `${lvl.fill}%` }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
</section>
|
|
);
|
|
} |