info/developer-roadmap
1
0
Fork 0
mirror of https://github.com/kamranahmedse/developer-roadmap.git synced 2025-08-29 12:10:22 +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 (
<>
<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} />
<div>
<StepLabel label="Pick progress to show (Max. 4)" />
<div className="flex min-h-[30px] flex-wrap">
<div className="flex flex-wrap">
<RoadmapSelect
selectedRoadmaps={roadmaps}
setSelectedRoadmaps={setRoadmaps}
@@ -58,7 +58,7 @@ export function RoadCardPage() {
</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} />
<div>
<StepLabel label="Select Mode (Dark vs Light)" />
@@ -85,7 +85,7 @@ export function RoadCardPage() {
</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} />
<div>
<StepLabel label="Select Version" />
@@ -111,7 +111,7 @@ export function RoadCardPage() {
</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} />
<div class="flex-grow">
<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 allProgress = progressList?.filter(
(progress) => progress.resourceType === 'roadmap'
) || [];
return (
<div className="flex flex-wrap gap-1">
{progressList
?.filter((progress) => progress.resourceType === 'roadmap')
.map((progress) => {
const isSelected = selectedRoadmaps.includes(progress.resourceId);
const canSelect = isSelected || canSelectMore;
{allProgress?.length === 0 && <p className={'text-sm text-gray-400 italic'}>No progress tracked so far.</p>}
{allProgress?.map((progress) => {
const isSelected = selectedRoadmaps.includes(progress.resourceId);
const canSelect = isSelected || canSelectMore;
return (
<SelectionButton
text={progress.resourceTitle}
isDisabled={!canSelect}
isSelected={isSelected}
onClick={() => {
if (isSelected) {
setSelectedRoadmaps(
selectedRoadmaps.filter(
(roadmap) => roadmap !== progress.resourceId
)
);
} else if (selectedRoadmaps.length < 4) {
setSelectedRoadmaps([
...selectedRoadmaps,
progress.resourceId,
]);
}
}}
/>
);
})}
return (
<SelectionButton
text={progress.resourceTitle}
isDisabled={!canSelect}
isSelected={isSelected}
onClick={() => {
if (isSelected) {
setSelectedRoadmaps(
selectedRoadmaps.filter(
(roadmap) => roadmap !== progress.resourceId
)
);
} else if (selectedRoadmaps.length < 4) {
setSelectedRoadmaps([...selectedRoadmaps, progress.resourceId]);
}
}}
/>
);
})}
</div>
);
}

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

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