info/developer-roadmap
1
0
Fork 0
mirror of https://github.com/kamranahmedse/developer-roadmap.git synced 2025-08-29 20:21:50 +02:00
Code Issues Releases Wiki Activity

UI changes on road cards

Browse Source
This commit is contained in:
Kamran Ahmed
2023-06-14 20:58:15 +01:00
parent 0031a9c6ba
commit 955d04e532
3 changed files with 32 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/RoadCard/RoadCardPage.tsx
View File

@@ -44,12 +44,12 @@ export function RoadCardPage() {
return ( return (
<> <>
<div className="mb-5 flex items-start gap-4 pt-2"> <div className="flex items-start gap-4 mx-0 sm:-mx-10 px-0 sm:px-10 border-b pt-2 pb-4">
<StepCounter step={1} /> <StepCounter step={1} />
<div> <div>
<StepLabel label="Pick progress to show (Max. 4)" /> <StepLabel label="Pick progress to show (Max. 4)" />
<div className="flex min-h-[30px] flex-wrap"> <div className="flex flex-wrap">
<RoadmapSelect <RoadmapSelect
selectedRoadmaps={roadmaps} selectedRoadmaps={roadmaps}
setSelectedRoadmaps={setRoadmaps} setSelectedRoadmaps={setRoadmaps}
@@ -58,7 +58,7 @@ export function RoadCardPage() {
</div> </div>
</div> </div>
<div className="mb-5 flex items-start gap-4"> <div className="flex items-start gap-4 mx-0 sm:-mx-10 px-0 sm:px-10 border-b py-4">
<StepCounter step={2} /> <StepCounter step={2} />
<div> <div>
<StepLabel label="Select Mode (Dark vs Light)" /> <StepLabel label="Select Mode (Dark vs Light)" />
@@ -85,7 +85,7 @@ export function RoadCardPage() {
</div> </div>
</div> </div>
<div className="mb-5 flex items-start gap-4"> <div className="flex items-start gap-4 mx-0 sm:-mx-10 px-0 sm:px-10 border-b py-4">
<StepCounter step={3} /> <StepCounter step={3} />
<div> <div>
<StepLabel label="Select Version" /> <StepLabel label="Select Version" />
@@ -111,7 +111,7 @@ export function RoadCardPage() {
</div> </div>
</div> </div>
<div className="mb-5 flex items-start gap-4"> <div className="flex items-start gap-4 mx-0 sm:-mx-10 px-0 sm:px-10 border-b py-4">
<StepCounter step={4} /> <StepCounter step={4} />
<div class="flex-grow"> <div class="flex-grow">
<StepLabel label="Share your #RoadCard with others" /> <StepLabel label="Share your #RoadCard with others" />

53
src/components/RoadCard/RoadmapSelect.tsx
View File

@@ -33,37 +33,36 @@ export function RoadmapSelect(props: RoadmapSelectProps) {
}, []); }, []);
const canSelectMore = selectedRoadmaps.length < 4; const canSelectMore = selectedRoadmaps.length < 4;
const allProgress = progressList?.filter(
(progress) => progress.resourceType === 'roadmap'
) || [];
return ( return (
<div className="flex flex-wrap gap-1"> <div className="flex flex-wrap gap-1">
{progressList {allProgress?.length === 0 && <p className={'text-sm text-gray-400 italic'}>No progress tracked so far.</p>}
?.filter((progress) => progress.resourceType === 'roadmap') {allProgress?.map((progress) => {
.map((progress) => { const isSelected = selectedRoadmaps.includes(progress.resourceId);
const isSelected = selectedRoadmaps.includes(progress.resourceId); const canSelect = isSelected || canSelectMore;
const canSelect = isSelected || canSelectMore;
return ( return (
<SelectionButton <SelectionButton
text={progress.resourceTitle} text={progress.resourceTitle}
isDisabled={!canSelect} isDisabled={!canSelect}
isSelected={isSelected} isSelected={isSelected}
onClick={() => { onClick={() => {
if (isSelected) { if (isSelected) {
setSelectedRoadmaps( setSelectedRoadmaps(
selectedRoadmaps.filter( selectedRoadmaps.filter(
(roadmap) => roadmap !== progress.resourceId (roadmap) => roadmap !== progress.resourceId
) )
); );
} else if (selectedRoadmaps.length < 4) { } else if (selectedRoadmaps.length < 4) {
setSelectedRoadmaps([ setSelectedRoadmaps([...selectedRoadmaps, progress.resourceId]);
...selectedRoadmaps, }
progress.resourceId, }}
]); />
} );
}} })}
/>
);
})}
</div> </div>
); );
} }

2
src/pages/account/road-card.astro
View File

@@ -7,7 +7,7 @@ import { RoadCardPage } from '../../components/RoadCard/RoadCardPage';
<AccountLayout <AccountLayout
title='Road Card' title='Road Card'
noIndex={true} noIndex={true}
initialLoadingMessage='Preparing card..' initialLoadingMessage='Preparing card'
> >
<AccountSidebar activePageId='road-card' activePageTitle='Road Card'> <AccountSidebar activePageId='road-card' activePageTitle='Road Card'>
<RoadCardPage client:load /> <RoadCardPage client:load />