Kamran Ahmed
3 months ago
parent
932b513d98
commit
393022c826
10 changed files with 367 additions and 462 deletions
@ -1,264 +0,0 @@ |
|||||||
import type { UserProgressResponse } from './FavoriteRoadmaps'; |
|
||||||
import { CheckIcon } from '../ReactIcons/CheckIcon'; |
|
||||||
import { MarkFavorite } from '../FeaturedItems/MarkFavorite'; |
|
||||||
import { Spinner } from '../ReactIcons/Spinner'; |
|
||||||
import type { ResourceType } from '../../lib/resource-progress'; |
|
||||||
import { MapIcon, Users2 } from 'lucide-react'; |
|
||||||
import { CreateRoadmapButton } from '../CustomRoadmap/CreateRoadmap/CreateRoadmapButton'; |
|
||||||
import { CreateRoadmapModal } from '../CustomRoadmap/CreateRoadmap/CreateRoadmapModal'; |
|
||||||
import { type ReactNode, useState } from 'react'; |
|
||||||
import { FeatureAnnouncement } from '../FeatureAnnouncement.tsx'; |
|
||||||
|
|
||||||
type ProgressRoadmapProps = { |
|
||||||
url: string; |
|
||||||
percentageDone: number; |
|
||||||
allowFavorite?: boolean; |
|
||||||
|
|
||||||
resourceId: string; |
|
||||||
resourceType: ResourceType; |
|
||||||
resourceTitle: string; |
|
||||||
isFavorite?: boolean; |
|
||||||
}; |
|
||||||
function HeroRoadmap(props: ProgressRoadmapProps) { |
|
||||||
const { |
|
||||||
url, |
|
||||||
percentageDone, |
|
||||||
resourceType, |
|
||||||
resourceId, |
|
||||||
resourceTitle, |
|
||||||
isFavorite, |
|
||||||
allowFavorite = true, |
|
||||||
} = props; |
|
||||||
|
|
||||||
return ( |
|
||||||
<a |
|
||||||
href={url} |
|
||||||
className="relative flex flex-col overflow-hidden rounded-md border border-slate-800 bg-slate-900 p-3 text-sm text-slate-400 hover:border-slate-600 hover:text-slate-300" |
|
||||||
> |
|
||||||
<span className="relative z-20">{resourceTitle}</span> |
|
||||||
|
|
||||||
<span |
|
||||||
className="absolute bottom-0 left-0 top-0 z-10 bg-[#172a3a]" |
|
||||||
style={{ width: `${percentageDone}%` }} |
|
||||||
></span> |
|
||||||
|
|
||||||
{allowFavorite && ( |
|
||||||
<MarkFavorite |
|
||||||
resourceId={resourceId} |
|
||||||
resourceType={resourceType} |
|
||||||
favorite={isFavorite} |
|
||||||
/> |
|
||||||
)} |
|
||||||
</a> |
|
||||||
); |
|
||||||
} |
|
||||||
|
|
||||||
type ProgressTitleProps = { |
|
||||||
icon: any; |
|
||||||
isLoading?: boolean; |
|
||||||
title: string | ReactNode; |
|
||||||
}; |
|
||||||
|
|
||||||
export function HeroTitle(props: ProgressTitleProps) { |
|
||||||
const { isLoading = false, title, icon } = props; |
|
||||||
|
|
||||||
return ( |
|
||||||
<p className="mb-4 flex items-center text-sm text-gray-400"> |
|
||||||
{!isLoading && icon} |
|
||||||
{isLoading && ( |
|
||||||
<span className="mr-1.5"> |
|
||||||
<Spinner /> |
|
||||||
</span> |
|
||||||
)} |
|
||||||
{title} |
|
||||||
</p> |
|
||||||
); |
|
||||||
} |
|
||||||
export type HeroTeamRoadmaps = Record<string, UserProgressResponse>; |
|
||||||
|
|
||||||
type ProgressListProps = { |
|
||||||
progress: UserProgressResponse; |
|
||||||
customRoadmaps: UserProgressResponse; |
|
||||||
teamRoadmaps?: HeroTeamRoadmaps; |
|
||||||
isLoading?: boolean; |
|
||||||
}; |
|
||||||
|
|
||||||
export function HeroRoadmaps(props: ProgressListProps) { |
|
||||||
const { |
|
||||||
teamRoadmaps = {}, |
|
||||||
progress, |
|
||||||
isLoading = false, |
|
||||||
customRoadmaps, |
|
||||||
} = props; |
|
||||||
|
|
||||||
const [isCreatingRoadmap, setIsCreatingRoadmap] = useState(false); |
|
||||||
const [creatingRoadmapTeamId, setCreatingRoadmapTeamId] = useState<string>(); |
|
||||||
|
|
||||||
return ( |
|
||||||
<div className="relative pb-12 pt-4 sm:pt-7"> |
|
||||||
<p className="mb-7 mt-2 text-sm"> |
|
||||||
<FeatureAnnouncement /> |
|
||||||
</p> |
|
||||||
{isCreatingRoadmap && ( |
|
||||||
<CreateRoadmapModal |
|
||||||
teamId={creatingRoadmapTeamId} |
|
||||||
onClose={() => { |
|
||||||
setIsCreatingRoadmap(false); |
|
||||||
setCreatingRoadmapTeamId(undefined); |
|
||||||
}} |
|
||||||
/> |
|
||||||
)} |
|
||||||
{ |
|
||||||
<HeroTitle |
|
||||||
icon={ |
|
||||||
(<CheckIcon additionalClasses="mr-1.5 h-[14px] w-[14px]" />) as any |
|
||||||
} |
|
||||||
isLoading={isLoading} |
|
||||||
title="Your progress and favorite roadmaps." |
|
||||||
/> |
|
||||||
} |
|
||||||
|
|
||||||
<div className="grid grid-cols-1 gap-2 sm:grid-cols-2 md:grid-cols-3"> |
|
||||||
{progress.map((resource) => ( |
|
||||||
<HeroRoadmap |
|
||||||
key={`${resource.resourceType}-${resource.resourceId}`} |
|
||||||
resourceId={resource.resourceId} |
|
||||||
resourceType={resource.resourceType} |
|
||||||
resourceTitle={resource.resourceTitle} |
|
||||||
isFavorite={resource.isFavorite} |
|
||||||
percentageDone={ |
|
||||||
((resource.skipped + resource.done) / resource.total) * 100 |
|
||||||
} |
|
||||||
url={ |
|
||||||
resource.resourceType === 'roadmap' |
|
||||||
? `/${resource.resourceId}` |
|
||||||
: `/best-practices/${resource.resourceId}` |
|
||||||
} |
|
||||||
/> |
|
||||||
))} |
|
||||||
</div> |
|
||||||
|
|
||||||
<div className="mt-5"> |
|
||||||
{ |
|
||||||
<HeroTitle |
|
||||||
icon={<MapIcon className="mr-1.5 h-[14px] w-[14px]" />} |
|
||||||
title="Your custom roadmaps" |
|
||||||
/> |
|
||||||
} |
|
||||||
|
|
||||||
{customRoadmaps.length === 0 && ( |
|
||||||
<p className="rounded-md border border-dashed border-gray-800 p-2 text-sm text-gray-600"> |
|
||||||
You haven't created any custom roadmaps yet.{' '} |
|
||||||
<button |
|
||||||
className="text-gray-500 underline underline-offset-2 hover:text-gray-400" |
|
||||||
onClick={() => setIsCreatingRoadmap(true)} |
|
||||||
> |
|
||||||
Create one! |
|
||||||
</button> |
|
||||||
</p> |
|
||||||
)} |
|
||||||
|
|
||||||
{customRoadmaps.length > 0 && ( |
|
||||||
<div className="grid grid-cols-1 gap-2 sm:grid-cols-2 md:grid-cols-3"> |
|
||||||
{customRoadmaps.map((customRoadmap) => { |
|
||||||
return ( |
|
||||||
<HeroRoadmap |
|
||||||
key={customRoadmap.resourceId} |
|
||||||
resourceId={customRoadmap.resourceId} |
|
||||||
resourceType={'roadmap'} |
|
||||||
resourceTitle={customRoadmap.resourceTitle} |
|
||||||
percentageDone={ |
|
||||||
((customRoadmap.skipped + customRoadmap.done) / |
|
||||||
customRoadmap.total) * |
|
||||||
100 |
|
||||||
} |
|
||||||
url={`/r/${customRoadmap?.roadmapSlug}`} |
|
||||||
allowFavorite={false} |
|
||||||
/> |
|
||||||
); |
|
||||||
})} |
|
||||||
|
|
||||||
<CreateRoadmapButton /> |
|
||||||
</div> |
|
||||||
)} |
|
||||||
</div> |
|
||||||
|
|
||||||
{Object.keys(teamRoadmaps).map((teamName) => { |
|
||||||
const currentTeam: UserProgressResponse[0]['team'] = |
|
||||||
teamRoadmaps?.[teamName]?.[0]?.team; |
|
||||||
const roadmapsList = teamRoadmaps[teamName].filter( |
|
||||||
(roadmap) => !!roadmap.resourceTitle, |
|
||||||
); |
|
||||||
const canManageTeam = ['admin', 'manager'].includes(currentTeam?.role!); |
|
||||||
|
|
||||||
return ( |
|
||||||
<div className="mt-5" key={teamName}> |
|
||||||
{ |
|
||||||
<HeroTitle |
|
||||||
icon={<Users2 className="mr-1.5 h-[14px] w-[14px]" />} |
|
||||||
title={ |
|
||||||
<> |
|
||||||
Team{' '} |
|
||||||
<a |
|
||||||
className="mx-1 font-medium underline underline-offset-2 transition-colors hover:text-gray-300" |
|
||||||
href={`/team/activity?t=${currentTeam?.id}`} |
|
||||||
> |
|
||||||
{teamName} |
|
||||||
</a> |
|
||||||
Roadmaps |
|
||||||
</> |
|
||||||
} |
|
||||||
/> |
|
||||||
} |
|
||||||
|
|
||||||
{roadmapsList.length === 0 && ( |
|
||||||
<p className="rounded-md border border-dashed border-gray-800 p-2 text-sm text-gray-600"> |
|
||||||
Team does not have any roadmaps yet.{' '} |
|
||||||
{canManageTeam && ( |
|
||||||
<button |
|
||||||
className="text-gray-500 underline underline-offset-2 hover:text-gray-400" |
|
||||||
onClick={() => { |
|
||||||
setCreatingRoadmapTeamId(currentTeam?.id); |
|
||||||
setIsCreatingRoadmap(true); |
|
||||||
}} |
|
||||||
> |
|
||||||
Create one! |
|
||||||
</button> |
|
||||||
)} |
|
||||||
</p> |
|
||||||
)} |
|
||||||
|
|
||||||
{roadmapsList.length > 0 && ( |
|
||||||
<div className="grid grid-cols-1 gap-2 sm:grid-cols-2 md:grid-cols-3"> |
|
||||||
{roadmapsList.map((customRoadmap) => { |
|
||||||
return ( |
|
||||||
<HeroRoadmap |
|
||||||
key={customRoadmap.resourceId} |
|
||||||
resourceId={customRoadmap.resourceId} |
|
||||||
resourceType={'roadmap'} |
|
||||||
resourceTitle={customRoadmap.resourceTitle} |
|
||||||
percentageDone={ |
|
||||||
((customRoadmap.skipped + customRoadmap.done) / |
|
||||||
customRoadmap.total) * |
|
||||||
100 |
|
||||||
} |
|
||||||
url={`/r/${customRoadmap?.roadmapSlug}`} |
|
||||||
allowFavorite={false} |
|
||||||
/> |
|
||||||
); |
|
||||||
})} |
|
||||||
|
|
||||||
{canManageTeam && ( |
|
||||||
<CreateRoadmapButton |
|
||||||
teamId={currentTeam?.id} |
|
||||||
text="Create Team Roadmap" |
|
||||||
/> |
|
||||||
)} |
|
||||||
</div> |
|
||||||
)} |
|
||||||
</div> |
|
||||||
); |
|
||||||
})} |
|
||||||
</div> |
|
||||||
); |
|
||||||
} |
|
||||||
Loading…
Reference in new issue