diff --git a/src/components/RoadCard/RoadCardPage.tsx b/src/components/RoadCard/RoadCardPage.tsx index 85f6d7ece..b0585a9e0 100644 --- a/src/components/RoadCard/RoadCardPage.tsx +++ b/src/components/RoadCard/RoadCardPage.tsx @@ -1,14 +1,29 @@ -import { useEffect, useState } from 'preact/hooks'; +import { useState } from 'preact/hooks'; import { useCopyText } from '../../hooks/use-copy-text'; import { useAuth } from '../../hooks/use-auth'; import { TallBadgeTab } from './TallBadgeTab'; import { WideBadgeTab } from './WideBadgeTab'; import CopyIcon from '../../icons/copy.svg'; -import { RoadmapSelect, RoadmapSelectProps } from './RoadmapSelect'; -import { httpGet } from '../../lib/http'; -import { pageProgressMessage } from '../../stores/page'; -import type { UserProgressResponse } from '../HeroSection/FavoriteRoadmaps'; +import { RoadmapSelect } from './RoadmapSelect'; + +type StepCounterProps = { + step: number; +}; + +function StepCounter(props: StepCounterProps) { + const { step } = props; + + return ( + + {step} + + ); +} type EditorProps = { title: string; @@ -51,71 +66,80 @@ export type BadgeProps = { }; export function RoadCardPage() { - const [selectedBadge, setSelectedBadge] = useState<'tall' | 'wide'>('tall'); - const [progress, setProgress] = useState([]); - const [selectedRoadmaps, setSelectedRoadmap] = useState< - RoadmapSelectProps['options'] - >([]); - + const [version, setVersion] = useState<'tall' | 'wide'>('tall'); + const [variant, setVariant] = useState<'dark' | 'light'>('dark'); const user = useAuth(); if (!user) { return null; } + const badgeUrl = new URL( + `${import.meta.env.PUBLIC_API_URL}/v1-badge/${version}/${user?.id}` + ); + + badgeUrl.searchParams.set('variant', variant); + return ( <> -
-

Road Card

-

- Grab your #RoadCard and share your progress with others. -

+
+ +
+ + Select progress to show (maximum 4 items) + + +
+ +
+
-
-
-
- +
+ +
+ + Select Mode (Dark vs Light) + - +
- - -
- {selectedBadge === 'tall' && ( - - )} - {selectedBadge === 'wide' && ( - - )} +
+ +
+ + Select Variant + + +
+ + +
+
+
+ +
+ +
+ + Share your #RoadCard with others + + + + RoadCard + +
); 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 = ` ${user?.name}${user?.name &&