Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feature: added pencil icons to all components in the "My Profile" view
- Loading branch information
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,61 @@ | ||
| import React from 'react' | ||
| import { Pencil } from '../../../../../assets/svg' | ||
| import medal from '../../../../../assets/img/medal-dynamic-color.png' | ||
| import { useAppSelector } from '../../../../../hooks/ReduxHooks' | ||
| import LoadingSpiner from '../../../../atoms/LoadingSpiner' | ||
|
|
||
| const MyProfileBootcampCard: React.FC = () => { | ||
| const { studentBootcamps } = useAppSelector((state) => state.ShowStudentReducer) | ||
| const { bootcampData, isErrorBootcamp, isLoadingBootcamp } = studentBootcamps | ||
|
|
||
| return ( | ||
| <div className="flex flex-col gap-4" data-testid="BootcampCard"> | ||
| <div className='flex'> | ||
| <h3 className="text-lg font-bold">Datos del bootcamp</h3> | ||
| <button className='ml-auto'> | ||
| <img src={Pencil} alt="edit training information" /> | ||
| </button> | ||
| </div> | ||
| {isLoadingBootcamp && <LoadingSpiner />} | ||
| {isErrorBootcamp && ( | ||
| <LoadingSpiner | ||
| textContent="Upss!!" | ||
| type="loading-bars" | ||
| textColor="red" | ||
| /> | ||
| )} | ||
| {!isLoadingBootcamp && | ||
| (bootcampData.length === 0 ? ( | ||
| <div className="flex flex-col gap-1 rounded-md bg-gray-5-background p-5 shadow-[0_4px_0_0_rgba(0,0,0,0.25)]"> | ||
| <p className="text- font-medium text-black-3"> | ||
| - Bootcamp no terminado - | ||
| </p> | ||
| </div> | ||
| ) : ( | ||
| bootcampData.map((bootcamp) => ( | ||
| <div className="flex flex-col gap-1 rounded-md bg-gray-5-background p-5 shadow-[0_4px_0_0_rgba(0,0,0,0.25)]"> | ||
| <div | ||
| className="flex items-center" | ||
| key={bootcamp.bootcamp_id} | ||
| > | ||
| <img | ||
| src={medal} | ||
| alt="Medal" | ||
| className="w-16 pe-1" | ||
| /> | ||
| <div className="flex flex-col gap-1"> | ||
| <p className="text-base font-semibold leading-tight text-black-3"> | ||
| {bootcamp.name} | ||
| </p> | ||
| <p className="text-sm font-medium text-black-2"> | ||
| Finalizado: {bootcamp.bootcamp_end_date} | ||
| </p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| )) | ||
| ))} | ||
| </div> | ||
| ) | ||
| } | ||
| export default MyProfileBootcampCard | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,93 @@ | ||
| import target from '../../../../../assets/img/target.png' | ||
| import folder from '../../../../../assets/img/folder.png' | ||
| import { Pencil } from '../../../../../assets/svg' | ||
| import { useAppSelector } from '../../../../../hooks/ReduxHooks' | ||
| import LoadingSpiner from '../../../../atoms/LoadingSpiner' | ||
|
|
||
| const MyProfileCollaborationCard: React.FC = () => { | ||
| const { studentCollaborations } = useAppSelector((state) => state.ShowStudentReducer) | ||
| const {collaborationsData, isLoadingCollaborations, isErrorCollaborations} = studentCollaborations | ||
| const [resourcesCard, challengesCard] = collaborationsData | ||
|
|
||
| return ( | ||
| <div className="flex flex-col gap-4" data-testid="CollaborationCard"> | ||
| <div className='flex'> | ||
| <h3 className="text-lg font-bold text-black-3">Colaboración</h3> | ||
| <button className='ml-auto'> | ||
| <img src={Pencil} alt="edit collaboration information" /> | ||
| </button> | ||
| </div> | ||
| <div className="flex flex-col gap-4 md:flex-row"> | ||
| {isLoadingCollaborations && <LoadingSpiner />} | ||
| {isErrorCollaborations && ( | ||
| <LoadingSpiner | ||
| textContent="Upss!!" | ||
| type="loading-bars" | ||
| textColor="red" | ||
| /> | ||
| )} | ||
| {!isLoadingCollaborations && ( | ||
| <> | ||
| {/* <ResourcesCard /> */} | ||
| <div className="flex w-2/3 md:w-1/2 items-start justify-between rounded-md bg-ita-wiki p-3 pl-7 pt-3"> | ||
| <div className="flex flex-col"> | ||
| {resourcesCard === undefined ? ( | ||
| <p className="py-2 text-l text-white"> | ||
| -loading- | ||
| </p> | ||
| ) : ( | ||
| <p className="text-2xl text-white"> | ||
| {resourcesCard.quantity} | ||
| </p> | ||
| )} | ||
| <p className="text-md text-white"> | ||
| Recursos subidos | ||
| </p> | ||
| <p className="mt-2 text-sm font-light text-white"> | ||
| ita-wiki | ||
| </p> | ||
| </div> | ||
| <div className="w-9 -mt-1"> | ||
| <img | ||
| src={folder} | ||
| alt="folder" | ||
| className="h-full" | ||
| /> | ||
| </div> | ||
| </div> | ||
|
|
||
| {/* <ChallengesCard /> */} | ||
| <div className="flex w-2/3 md:w-1/2 items-start justify-between rounded-md bg-ita-challenges p-3 pl-7 pt-3"> | ||
| <div className="flex flex-col "> | ||
| {challengesCard === undefined ? ( | ||
| <p className="py-2 text-l text-white"> | ||
| -loading- | ||
| </p> | ||
| ) : ( | ||
| <p className="text-2xl text-white"> | ||
| {challengesCard.quantity} | ||
| </p> | ||
| )} | ||
| <p className="text-md text-white"> | ||
| Retos completados | ||
| </p> | ||
| <p className="mt-2 text-sm font-light text-white"> | ||
| ita-challenges | ||
| </p> | ||
| </div> | ||
| <div className="w-10 -mt-2"> | ||
| <img | ||
| src={target} | ||
| alt="folder" | ||
| className="w-full" | ||
| /> | ||
| </div> | ||
| </div> | ||
| </> | ||
| )} | ||
| </div> | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| export default MyProfileCollaborationCard | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,45 @@ | ||
| import { Pencil } from '../../../../../assets/svg' | ||
| import { useAppSelector } from '../../../../../hooks/ReduxHooks' | ||
| import LoadingSpiner from '../../../../atoms/LoadingSpiner' | ||
|
|
||
| const MyProfileLanguagesCard: React.FC = () => { | ||
| const { studentLanguages } = useAppSelector((state) => state.ShowStudentReducer) | ||
| const { languagesData, isLoadingLanguages, isErrorLanguages } = studentLanguages | ||
|
|
||
| return ( | ||
| <div data-testid="LanguagesCard"> | ||
| <div className='flex mb-4'> | ||
| <h3 className="text-lg font-bold">Idiomas</h3> | ||
| <button className='ml-auto'> | ||
| <img src={Pencil} alt="edit languages information" /> | ||
| </button> | ||
| </div> | ||
| {isLoadingLanguages && <LoadingSpiner />} | ||
| {isErrorLanguages && ( | ||
| <LoadingSpiner | ||
| textContent="Upss!!" | ||
| type="loading-bars" | ||
| textColor="red" | ||
| /> | ||
| )} | ||
| {!isLoadingLanguages && ( | ||
| <div className="flex flex-col gap-2"> | ||
| <div className="flex flex-col gap-1"> | ||
| {languagesData.map((language) => ( | ||
| <ul | ||
| key={language.id} | ||
| className="flex flex-col" | ||
| > | ||
| <li className="text-sm font-semibold text-black-2"> | ||
| {language.name} - {language.level} | ||
| </li> | ||
| </ul> | ||
| ))} | ||
| </div> | ||
| </div> | ||
| )} | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| export default MyProfileLanguagesCard | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,46 @@ | ||
| import { v4 as uuidv4 } from 'uuid' | ||
| import remoto from '../../../../../assets/svg/remoto.svg' | ||
| import { Pencil } from '../../../../../assets/svg' | ||
| import { useAppSelector } from '../../../../../hooks/ReduxHooks' | ||
| import LoadingSpiner from '../../../../atoms/LoadingSpiner' | ||
|
|
||
| const MyProfileModalityCard: React.FC = () => { | ||
| const { | ||
| modality: modalityData, | ||
| isLoadingModality, | ||
| isErrorModality, | ||
| } = useAppSelector((state) => state.ShowStudentReducer.studentAdditionalModality) | ||
|
|
||
| return ( | ||
| <div className="flex flex-col gap-3" data-testid="ModalityCard"> | ||
| <div className='flex'> | ||
| <h3 className="font-bold text-lg">Modalidad</h3> | ||
| <button className='ml-auto'> | ||
| <img src={Pencil} alt="edit modality information" /> | ||
| </button> | ||
| </div> | ||
| {isLoadingModality && <LoadingSpiner />} | ||
| {isErrorModality && ( | ||
| <LoadingSpiner | ||
| textContent="Upss!!" | ||
| type="loading-bars" | ||
| textColor="red" | ||
| /> | ||
| )} | ||
| {!isLoadingModality && ( | ||
| <div className="flex-col items-center "> | ||
| {modalityData.map((modality) => ( | ||
| <div key={uuidv4()} className="flex gap-3 py-1"> | ||
| <img src={remoto} className="pr-2" alt="remoto" /> | ||
| <p className="text-sm font-semibold text-black-2"> | ||
| {modality.toString()} | ||
| </p> | ||
| </div> | ||
| ))} | ||
| </div> | ||
| )} | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| export default MyProfileModalityCard | ||
Oops, something went wrong.