65 lines
2.2 KiB
JavaScript
65 lines
2.2 KiB
JavaScript
import propTypes from 'prop-types';
|
|
|
|
const levelMappings = {
|
|
'N': 'Nice to have',
|
|
'B': 'Podstawowy',
|
|
'M': 'Średnio zaawansowany',
|
|
'A': 'Zaawansowany',
|
|
'E': 'Ekspert',
|
|
};
|
|
const skillLevels = ['N', 'B', 'M', 'A', 'E'];
|
|
|
|
function renderCircles(letter, handleCircleClick) {
|
|
const level = levelMappings[letter];
|
|
const numberOfFilledCircles = Object.keys(levelMappings).indexOf(letter) + 1;
|
|
|
|
return (
|
|
<>
|
|
{[...Array(5)].map((_, index) => (
|
|
<div
|
|
key={index}
|
|
onClick={() => handleCircleClick(skillLevels[index])}
|
|
className={`justify-self-center w-3.5 h-3.5 rounded-full
|
|
${index < numberOfFilledCircles ? 'bg-red-300 hover:bg-red-700' : 'bg-gray-500 hover:bg-gray-600'}`}
|
|
/>
|
|
))}
|
|
</>
|
|
);
|
|
};
|
|
|
|
|
|
const SelectedSkill = ({ skill_name, skillId ,letter, onLevelChange, removeSkillFromList }) => {
|
|
const handleCircleClick = (newLetter) => {
|
|
// const letter = Object.keys(levelMappings)[levelIndex];
|
|
console.log(`Circle clicked: ${newLetter}`);
|
|
onLevelChange(skillId, newLetter);
|
|
};
|
|
return (
|
|
<div className="mr-12">
|
|
<div key={skillId} className="relative selected-skill bg-slate-200 rounded-2xl h-min w-full p-2 mb-5 m-2 ">
|
|
<div className='flex justify-center items-center'>
|
|
<span className='text-slate-700 font-semibold text-[12px] text-center w-48 '>{skill_name}</span>
|
|
</div>
|
|
<button onClick={(e) => {e.preventDefault(); removeSkillFromList(skill_name)}} className="absolute top-1 right-5 text-black">
|
|
×
|
|
</button>
|
|
<div className='h-0.5 w-full bg-dimWhite opacity-60 mt-1'></div>
|
|
<div className='grid grid-cols-5 mt-2'>
|
|
{renderCircles(letter, handleCircleClick)}
|
|
</div>
|
|
<p className='font-poppins font-semibold text-slate-700 text-center text-[12px] mt-1'>{levelMappings[letter]}</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
SelectedSkill.propTypes = {
|
|
skill_name: propTypes.string,
|
|
skillId: propTypes.number,
|
|
letter: propTypes.string,
|
|
onLevelChange: propTypes.func,
|
|
removeSkillFromList: propTypes.func,
|
|
};
|
|
|
|
export default SelectedSkill;
|