computer-scienceangular-roadmapbackend-roadmapblockchain-roadmapdba-roadmapdeveloper-roadmapdevops-roadmapfrontend-roadmapgo-roadmaphactoberfestjava-roadmapjavascript-roadmapnodejs-roadmappython-roadmapqa-roadmapreact-roadmaproadmapstudy-planvue-roadmapweb3-roadmap
126 lines
3.6 KiB
126 lines
3.6 KiB
import type { UserProgress } from '../TeamProgress/TeamProgressPage'; |
|
import { DashboardCustomProgressCard } from './DashboardCustomProgressCard'; |
|
import { DashboardCardLink } from './DashboardCardLink'; |
|
import { useState } from 'react'; |
|
import { CreateRoadmapModal } from '../CustomRoadmap/CreateRoadmap/CreateRoadmapModal'; |
|
import { |
|
ArrowUpRight, |
|
Bot, |
|
BrainCircuit, |
|
Map, |
|
PencilRuler, |
|
} from 'lucide-react'; |
|
|
|
type ListDashboardCustomProgressProps = { |
|
progresses: UserProgress[]; |
|
isLoading?: boolean; |
|
isCustomResources?: boolean; |
|
isAIGeneratedRoadmaps?: boolean; |
|
}; |
|
|
|
export function ListDashboardCustomProgress( |
|
props: ListDashboardCustomProgressProps, |
|
) { |
|
const { |
|
progresses, |
|
isLoading = false, |
|
isAIGeneratedRoadmaps = false, |
|
} = props; |
|
const [isCreateCustomRoadmapModalOpen, setIsCreateCustomRoadmapModalOpen] = |
|
useState(false); |
|
|
|
const customRoadmapModal = isCreateCustomRoadmapModalOpen ? ( |
|
<CreateRoadmapModal |
|
onClose={() => setIsCreateCustomRoadmapModalOpen(false)} |
|
onCreated={(roadmap) => { |
|
window.location.href = `${ |
|
import.meta.env.PUBLIC_EDITOR_APP_URL |
|
}/${roadmap?._id}`; |
|
return; |
|
}} |
|
/> |
|
) : null; |
|
|
|
return ( |
|
<> |
|
{customRoadmapModal} |
|
|
|
<div className="mb-2 mt-6 flex items-center justify-between gap-2"> |
|
<h2 className="text-xs uppercase text-gray-400"> |
|
{isAIGeneratedRoadmaps ? 'My AI Roadmaps' : 'My Custom Roadmaps'} |
|
</h2> |
|
|
|
<a |
|
href="/community" |
|
className="rounded-full bg-gray-200 px-2.5 py-0.5 text-xs font-medium text-gray-700 hover:bg-gray-300 hover:text-black" |
|
> |
|
Community Roadmaps |
|
</a> |
|
</div> |
|
|
|
{!isLoading && progresses.length === 0 && isAIGeneratedRoadmaps && ( |
|
<DashboardCardLink |
|
className="mt-0" |
|
icon={BrainCircuit} |
|
href="/ai" |
|
title="Generate Roadmaps with AI" |
|
description="You can generate your own roadmap with AI" |
|
/> |
|
)} |
|
|
|
{!isLoading && progresses.length === 0 && !isAIGeneratedRoadmaps && ( |
|
<DashboardCardLink |
|
className="mt-0" |
|
icon={PencilRuler} |
|
href="https://draw.roadmap.sh" |
|
title="Draw your own Roadmap" |
|
description="Use our editor to draw your own roadmap" |
|
/> |
|
)} |
|
|
|
<div className="grid grid-cols-1 gap-2 sm:grid-cols-2 md:grid-cols-4"> |
|
{isLoading && ( |
|
<> |
|
{Array.from({ length: 8 }).map((_, index) => ( |
|
<CustomProgressCardSkeleton key={index} /> |
|
))} |
|
</> |
|
)} |
|
|
|
{!isLoading && progresses.length > 0 && ( |
|
<> |
|
{progresses.map((progress) => ( |
|
<DashboardCustomProgressCard |
|
key={progress.resourceId} |
|
progress={progress} |
|
/> |
|
))} |
|
|
|
<a |
|
className="flex min-h-[80px] items-center justify-center rounded-lg border border-dashed border-gray-300 bg-white p-4 text-sm font-medium text-gray-500 hover:bg-gray-50 hover:text-gray-600" |
|
href={'/ai'} |
|
onClick={(e) => { |
|
if (!isAIGeneratedRoadmaps) { |
|
e.preventDefault(); |
|
setIsCreateCustomRoadmapModalOpen(true); |
|
} |
|
}} |
|
> |
|
{isAIGeneratedRoadmaps ? '+ Generate New' : '+ Create New'} |
|
</a> |
|
</> |
|
)} |
|
</div> |
|
</> |
|
); |
|
} |
|
|
|
type CustomProgressCardSkeletonProps = {}; |
|
|
|
export function CustomProgressCardSkeleton( |
|
props: CustomProgressCardSkeletonProps, |
|
) { |
|
return ( |
|
<div className="h-[106px] w-full animate-pulse rounded-md bg-gray-200" /> |
|
); |
|
}
|
|
|