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

misc fixes, new features

Browse Source
This commit is contained in:
Jakub K
2024-02-13 21:19:37 +01:00
parent 88adb39b19
commit a5f58d1bdb
9 changed files with 192 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
src/components/SelectedSkill.jsx
View File

@@ -1,37 +1,25 @@
import React from 'react';
const levels = ['Nice to have','Podstawowy', 'Średnio zaawansowany', 'Zaawansowany', 'Ekspert'];
const levelMappings = {
'N': 'Nice to have',
'B': 'Podstawowy',
'M': 'Średnio zaawansowany',
'A': 'Zaawansowany',
'E': 'Ekspert',
};
function renderCircles(level, handleCircleClick) {
let numberOfFilledCircles;
switch (level) {
case 'Nice to have':
numberOfFilledCircles = 1;
break;
case 'Podstawowy':
numberOfFilledCircles = 2;
break;
case 'Średnio zaawansowany':
numberOfFilledCircles = 3;
break
case 'Zaawansowany':
numberOfFilledCircles = 4;
break;
case 'Ekspert':
numberOfFilledCircles = 5;
break;
default:
numberOfFilledCircles = 1;
}
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(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'}`}
onClick={() => handleCircleClick(Object.keys(levelMappings)[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'}`}
/>
))}
</>
@@ -39,10 +27,10 @@ function renderCircles(level, handleCircleClick) {
};
const SelectedSkill = ({ skill, level, onLevelChange, removeSkillFromList, formData }) => {
const SelectedSkill = ({ skill, letter, onLevelChange, removeSkillFromList, formData }) => {
const handleCircleClick = (levelIndex) => {
const level = levels[levelIndex];
onLevelChange(skill, level);
const letter = Object.keys(levelMappings)[levelIndex];
onLevelChange(skill, levelIndex);
};
return (
<div className="skill-block">
@@ -53,9 +41,9 @@ const SelectedSkill = ({ skill, level, onLevelChange, removeSkillFromList, formD
</button>
<div className='h-0.5 w-full bg-dimWhite opacity-60 mt-1'></div>
<div className='grid grid-cols-5 mt-2'>
{renderCircles(level, handleCircleClick)}
{renderCircles(letter, handleCircleClick)}
</div>
<p className='font-poppins font-semibold text-slate-700 text-center text-[12px] mt-1'>{level}</p>
<p className='font-poppins font-semibold text-slate-700 text-center text-[12px] mt-1'>{levelMappings[letter]}</p>
</div>
</div>