komponenty

2023-12-15 23:54:10 +01:00
parent 536fdc63d2
commit 4c6c4cf2da
27 changed files with 1034 additions and 21 deletions
--- a/src/components/SelectedSkill.jsx
+++ b/src/components/SelectedSkill.jsx
@@ -0,0 +1,66 @@
+import React from 'react';
+
+const levels = ['Nice to have','Podstawowy', 'Średnio zaawansowany', 'Zaawansowany', '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;
+    }
+
+    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'}`} 
+                />
+            ))}
+        </>
+    );
+};
+
+
+const SelectedSkill = ({ skill, level, onLevelChange, removeSkillFromList, formData }) => {
+    const levelss = 'Nice to have';
+    const handleCircleClick = (levelIndex) => {
+        const level = levels[levelIndex]; 
+        onLevelChange(skill, level);
+      };
+  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">
+            &times;
+          </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)}
+          </div>
+          <p className='font-poppins font-semibold text-slate-700 text-center text-[12px] mt-1'>{level}</p>
+        </div>
+      
+    </div>
+  );
+};
+
+export default SelectedSkill;