Roadmap to becoming a developer in 2022
 
 
 
 
 

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" />
);
}