- {selectedBadge === 'tall' && (
-
- )}
- {selectedBadge === 'wide' && (
-
- )}
+
+
+
+
+ Select Variant
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Share your #RoadCard with others
+
+
+
+
+
+
>
);
diff --git a/src/components/RoadCard/RoadmapSelect.tsx b/src/components/RoadCard/RoadmapSelect.tsx
index f64a1347a..97761d106 100644
--- a/src/components/RoadCard/RoadmapSelect.tsx
+++ b/src/components/RoadCard/RoadmapSelect.tsx
@@ -3,11 +3,6 @@ import { useEffect, useState } from 'preact/hooks';
import { pageProgressMessage } from '../../stores/page';
import type { UserProgressResponse } from '../HeroSection/FavoriteRoadmaps';
-export type RoadmapOptionProps = {
- value: string;
- label: string;
-};
-
export function RoadmapSelect() {
const [progressList, setProgressList] = useState
();
@@ -30,17 +25,14 @@ export function RoadmapSelect() {
}, []);
return (
-
-
-
-
Select up to 4 roadmaps
+
+ {progressList
+ ?.filter((progress) => progress.resourceType === 'roadmap')
+ .map((progress) => (
+
+ ))}
);
}
diff --git a/src/helper/get-badge-link.ts b/src/helper/get-badge-link.ts
index 93bfac050..78181be1c 100644
--- a/src/helper/get-badge-link.ts
+++ b/src/helper/get-badge-link.ts
@@ -1,11 +1,10 @@
-import type { RoadmapOptionProps } from '../components/RoadCard/RoadmapSelect';
import type { useAuth } from '../hooks/use-auth';
export type GetBadgeLinkProps = {
user: ReturnType
;
variant: 'dark' | 'light';
badge: 'tall' | 'wide';
- roadmaps?: RoadmapOptionProps[];
+ roadmaps?: string[];
};
export function getBadgeLink({
@@ -20,12 +19,11 @@ export function getBadgeLink({
if (variant) {
badgeUrl.searchParams.set('variant', variant);
}
+
if (roadmaps?.length) {
- badgeUrl.searchParams.set(
- 'roadmaps',
- roadmaps.map(({ value }) => value).join(',')
- );
+ badgeUrl.searchParams.set('roadmaps', roadmaps.join(','));
}
+
const textareaContent = `