jakub.kaniecki/izaac-frontend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

RC-0.1

Browse Source
This commit is contained in:
Jakub K
2024-03-17 19:49:59 +01:00
parent a5f58d1bdb
commit 3f8624efd6
25 changed files with 952 additions and 409 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/components/SelectedSkill.jsx
View File

@@ -7,6 +7,7 @@ const levelMappings = {
'A': 'Zaawansowany',
'E': 'Ekspert',
};
const skillLevels = ['N', 'B', 'M', 'A', 'E'];
function renderCircles(letter, handleCircleClick) {
const level = levelMappings[letter];
@@ -17,7 +18,7 @@ function renderCircles(letter, handleCircleClick) {
{[...Array(5)].map((_, index) => (
<div
key={index}
onClick={() => handleCircleClick(Object.keys(levelMappings)[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'}`}
/>
@@ -27,16 +28,19 @@ function renderCircles(letter, handleCircleClick) {
};
const SelectedSkill = ({ skill, letter, onLevelChange, removeSkillFromList, formData }) => {
const handleCircleClick = (levelIndex) => {
const letter = Object.keys(levelMappings)[levelIndex];
onLevelChange(skill, levelIndex);
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="skill-block">
<div key={skill} className="relative selected-skill bg-slate-200 rounded-2xl h-20 w-56 p-2 mb-5">
<p className='text-slate-700 font-semibold text-[12px] text-center'>{skill}</p>
<button onClick={(e) => {e.preventDefault(); removeSkillFromList(skill)}} className="absolute top-1 right-5 text-black">
<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">
&times;
</button>
<div className='h-0.5 w-full bg-dimWhite opacity-60 mt-1'></div>
@@ -45,7 +49,6 @@ const SelectedSkill = ({ skill, letter, onLevelChange, removeSkillFromList, form
</div>
<p className='font-poppins font-semibold text-slate-700 text-center text-[12px] mt-1'>{levelMappings[letter]}</p>
</div>
</div>
);
};