diff --git a/src/components/profile/SkillManagement.tsx b/src/components/profile/SkillManagement.tsx index b44d3e6580b72a4764f6f468c7c73abfead60590..a193ce4f39458827d9d767b7c4e027630857e8ee 100644 --- a/src/components/profile/SkillManagement.tsx +++ b/src/components/profile/SkillManagement.tsx @@ -9,14 +9,18 @@ function UserSkillBit({ onDelete, skillName, onClick, + selected, }: { skillName: string; onDelete: () => void; onClick: () => void; + selected: boolean; }) { return ( <div - className="flex gap-2 bg-primary text-white px-4 py-2 rounded-md btn btn-neutral" + className={`normal-case flex gap-2 bg-primary text-white px-4 py-2 rounded-md btn btn-neutral ${ + selected ? "brightness-110" : "" + }`} onClick={onClick} > <p>{skillName}</p> @@ -38,20 +42,20 @@ function AllSkillBit({ onClick, onAdd, alreadyOwned, + selected, }: { skillName: string; onAdd: () => void; onClick: () => void; alreadyOwned: boolean; + selected: boolean; }) { return ( <div - className="flex w-full bg-primary normal-case text-white px-4 py-2 rounded-md btn btn-neutral" - onClick={() => { - if (!alreadyOwned) { - onClick(); - } - }} + className={`flex w-full bg-gray-800 normal-case text-white px-4 py-2 rounded-md btn btn-neutral ${ + selected ? "bg-gray-600" : "" + }`} + onClick={onClick} > <p>{skillName}</p> <div className="flex-grow"></div> @@ -59,7 +63,9 @@ function AllSkillBit({ className="px-2 py-0 bg-transparent" onClick={(e) => { e.stopPropagation(); - onAdd(); + if (!alreadyOwned) { + onAdd(); + } }} > + @@ -155,7 +161,12 @@ function SkillManagement() { if (!oldSkills) { return oldSkills; } - return [addedSkill, ...(previousUserSkill ?? [])]; + + const result = [...(previousUserSkill ?? []), addedSkill]; + result.sort(({ skillName: skillName1 }, { skillName: skillName2 }) => + skillName1.localeCompare(skillName2) + ); + return result; } ); return { previousUserSkill }; @@ -172,16 +183,21 @@ function SkillManagement() { <div className="flex flex-col lg:grid grid-cols-2 grid-rows-2 w-full gap-4 lg:gap-6"> <div className="w-full flex flex-col items-center row-span-1 col-span-1 row-start-1 col-start-1"> {userSkillsStatus === "success" && userSkills ? ( - <div className="flex flex-row flex-wrap gap-2"> - {userSkills.map((skill) => ( - <UserSkillBit - onClick={() => setSelectedSkill(skill)} - skillName={skill.skillName} - key={skill.skillName} - onDelete={() => removeUserSkillMutation(skill)} - /> - ))} - </div> + userSkills.length === 0 ? ( + <p>You have no skills!</p> + ) : ( + <div className="flex flex-row flex-wrap gap-2"> + {userSkills.map((skill) => ( + <UserSkillBit + selected={selectedSkill?.skillName === skill.skillName} + onClick={() => setSelectedSkill(skill)} + skillName={skill.skillName} + key={skill.skillName} + onDelete={() => removeUserSkillMutation(skill)} + /> + ))} + </div> + ) ) : ( "Loading" )} @@ -194,10 +210,11 @@ function SkillManagement() { userSkills ? ( <p>Loading</p> ) : ( - <div className="w-full min-h-[18.75rem] rounded-lg overflow-y-scroll"> + <div className="w-full h-[18.75rem] bg-slate-600 px-3 py-3 lg:px-6 lg:py-6 flex flex-col rounded-lg overflow-y-scroll gap-2"> {allSkillsProcessor(allSkills ?? [], userSkills ?? []).map( ({ alreadyOwned, description, skillName }) => ( <AllSkillBit + selected={selectedSkill?.skillName === skillName} alreadyOwned={alreadyOwned} onAdd={() => addUserSkillMutation({ skillName, description })} onClick={() => setSelectedSkill({ description, skillName })} diff --git a/src/pages/Profile.tsx b/src/pages/Profile.tsx index 22015ae03f0b1b0e637fb46e3db967590eb6cb1b..4dd35b6a3eaa261df9cbae9cf1c2bff0012414cd 100644 --- a/src/pages/Profile.tsx +++ b/src/pages/Profile.tsx @@ -26,7 +26,7 @@ function Profile() { <h1 className="text-3xl font-bold self-start">Profile</h1> {user === undefined ? <p>Loading...</p> : <ProfileForm user={user} />} </section> - <section className="w-full flex flex-col items-start lg:items-center"> + <section className="w-full flex flex-col items-start lg:items-center gap-4"> <h2 className="text-2xl font-bold self-start">Skills</h2> <div className="w-full flex flex-col items-start"> <SkillManagement />