Arik Chakma
6 months ago
parent
7fab5018a0
commit
3e99ba0eb3
9 changed files with 433 additions and 372 deletions
@ -0,0 +1,28 @@ |
|||||||
|
import { ArrowUpRight } from 'lucide-react'; |
||||||
|
import { cn } from '../../lib/classname'; |
||||||
|
|
||||||
|
type DashboardCardLinkProps = { |
||||||
|
href: string; |
||||||
|
title: string; |
||||||
|
description: string; |
||||||
|
className?: string; |
||||||
|
}; |
||||||
|
|
||||||
|
export function DashboardCardLink(props: DashboardCardLinkProps) { |
||||||
|
const { href, title, description, className } = props; |
||||||
|
|
||||||
|
return ( |
||||||
|
<a |
||||||
|
className={cn( |
||||||
|
'relative mt-4 flex min-h-[168px] flex-col justify-end rounded-lg border border-gray-300 bg-gray-100 p-4 hover:bg-gray-200', |
||||||
|
className, |
||||||
|
)} |
||||||
|
href={href} |
||||||
|
target="_blank" |
||||||
|
> |
||||||
|
<h4 className="text-xl font-semibold tracking-wide">{title}</h4> |
||||||
|
<p className="mt-1 text-gray-500">{description}</p> |
||||||
|
<ArrowUpRight className="absolute right-3 top-3 size-4" /> |
||||||
|
</a> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,49 @@ |
|||||||
|
import { getPercentage } from '../../helper/number'; |
||||||
|
import type { UserProgress } from '../TeamProgress/TeamProgressPage'; |
||||||
|
|
||||||
|
type DashboardProgressCardProps = { |
||||||
|
progress: UserProgress; |
||||||
|
}; |
||||||
|
|
||||||
|
export function DashboardProgressCard(props: DashboardProgressCardProps) { |
||||||
|
const { progress } = props; |
||||||
|
|
||||||
|
const { |
||||||
|
resourceType, |
||||||
|
resourceId, |
||||||
|
resourceTitle, |
||||||
|
total: totalCount, |
||||||
|
done: doneCount, |
||||||
|
skipped: skippedCount, |
||||||
|
roadmapSlug, |
||||||
|
isCustomResource, |
||||||
|
} = progress; |
||||||
|
|
||||||
|
let url = |
||||||
|
resourceType === 'roadmap' |
||||||
|
? `/${resourceId}` |
||||||
|
: `/best-practices/${resourceId}`; |
||||||
|
|
||||||
|
if (isCustomResource) { |
||||||
|
url = `/r/${roadmapSlug}`; |
||||||
|
} |
||||||
|
|
||||||
|
const totalMarked = doneCount + skippedCount; |
||||||
|
const progressPercentage = getPercentage(totalMarked, totalCount); |
||||||
|
|
||||||
|
return ( |
||||||
|
<a |
||||||
|
href={url} |
||||||
|
className="group relative flex min-h-[80px] w-full flex-col justify-between overflow-hidden rounded-md border border-gray-300 bg-white p-3 text-left text-sm transition-all hover:border-gray-400" |
||||||
|
> |
||||||
|
<h4 className="truncate font-medium text-gray-900">{resourceTitle}</h4> |
||||||
|
|
||||||
|
<div className="h-2 w-full overflow-hidden rounded-md bg-black/10"> |
||||||
|
<div |
||||||
|
className="h-full bg-black/20" |
||||||
|
style={{ width: `${progressPercentage}%` }} |
||||||
|
></div> |
||||||
|
</div> |
||||||
|
</a> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,78 @@ |
|||||||
|
import type { UserProgress } from '../TeamProgress/TeamProgressPage'; |
||||||
|
import { DashboardProgressCard } from './DashboardProgressCard'; |
||||||
|
import { DashboardProgressCardSkeleton } from './ListDashboardProgress'; |
||||||
|
import { DashboardCardLink } from './DashboardCardLink'; |
||||||
|
import { useState } from 'react'; |
||||||
|
import { CreateRoadmapModal } from '../CustomRoadmap/CreateRoadmap/CreateRoadmapModal'; |
||||||
|
|
||||||
|
type ListDashboardCustomProgressProps = { |
||||||
|
progresses: UserProgress[]; |
||||||
|
isLoading?: boolean; |
||||||
|
isCustomResources?: boolean; |
||||||
|
}; |
||||||
|
|
||||||
|
export function ListDashboardCustomProgress( |
||||||
|
props: ListDashboardCustomProgressProps, |
||||||
|
) { |
||||||
|
const { progresses, isLoading = false } = props; |
||||||
|
const [isCreateCustomRoadmapModalOpen, setIsCreateCustomRoadmapModalOpen] = |
||||||
|
useState(false); |
||||||
|
|
||||||
|
if (!isLoading && progresses.length === 0) { |
||||||
|
return ( |
||||||
|
<DashboardCardLink |
||||||
|
className="mt-8" |
||||||
|
href="https://draw.roadmap.sh" |
||||||
|
title="Use our Editor to Draw Roadmaps" |
||||||
|
description="You can make roadmaps that look like ours" |
||||||
|
/> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
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} |
||||||
|
<h2 className="mb-3 mt-8 text-xs uppercase text-gray-400"> |
||||||
|
Custom Roadmaps |
||||||
|
</h2> |
||||||
|
|
||||||
|
{isLoading ? ( |
||||||
|
<div className="grid grid-cols-4 gap-2"> |
||||||
|
{Array.from({ length: 8 }).map((_, index) => ( |
||||||
|
<DashboardProgressCardSkeleton key={index} /> |
||||||
|
))} |
||||||
|
</div> |
||||||
|
) : ( |
||||||
|
<div className="grid grid-cols-4 gap-2"> |
||||||
|
{progresses.map((progress) => ( |
||||||
|
<DashboardProgressCard |
||||||
|
key={progress.resourceId} |
||||||
|
progress={progress} |
||||||
|
/> |
||||||
|
))} |
||||||
|
|
||||||
|
<button |
||||||
|
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" |
||||||
|
onClick={() => { |
||||||
|
setIsCreateCustomRoadmapModalOpen(true); |
||||||
|
}} |
||||||
|
> |
||||||
|
+ Create New |
||||||
|
</button> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
</> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,53 @@ |
|||||||
|
import { getPercentage } from '../../helper/number'; |
||||||
|
import { getUser } from '../../lib/jwt'; |
||||||
|
import type { UserProgress } from '../TeamProgress/TeamProgressPage'; |
||||||
|
import { DashboardProgressCard } from './DashboardProgressCard'; |
||||||
|
|
||||||
|
type ListDashboardProgressProps = { |
||||||
|
progresses: UserProgress[]; |
||||||
|
isLoading?: boolean; |
||||||
|
isCustomResources?: boolean; |
||||||
|
}; |
||||||
|
|
||||||
|
export function ListDashboardProgress(props: ListDashboardProgressProps) { |
||||||
|
const { progresses, isLoading = false } = props; |
||||||
|
|
||||||
|
if (!isLoading && progresses.length === 0) { |
||||||
|
return null; |
||||||
|
} |
||||||
|
|
||||||
|
return ( |
||||||
|
<> |
||||||
|
<h2 className="mb-3 mt-8 text-xs uppercase text-gray-400"> |
||||||
|
Progress and Bookmarks |
||||||
|
</h2> |
||||||
|
|
||||||
|
{isLoading ? ( |
||||||
|
<div className="grid grid-cols-4 gap-2"> |
||||||
|
{Array.from({ length: 8 }).map((_, index) => ( |
||||||
|
<DashboardProgressCardSkeleton key={index} /> |
||||||
|
))} |
||||||
|
</div> |
||||||
|
) : ( |
||||||
|
<div className="grid grid-cols-4 gap-2"> |
||||||
|
{progresses.map((progress) => ( |
||||||
|
<DashboardProgressCard |
||||||
|
key={progress.resourceId} |
||||||
|
progress={progress} |
||||||
|
/> |
||||||
|
))} |
||||||
|
</div> |
||||||
|
)} |
||||||
|
</> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
type DashboardProgressCardSkeletonProps = {}; |
||||||
|
|
||||||
|
export function DashboardProgressCardSkeleton( |
||||||
|
props: DashboardProgressCardSkeletonProps, |
||||||
|
) { |
||||||
|
return ( |
||||||
|
<div className="h-[80px] w-full animate-pulse rounded-md bg-gray-200" /> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,92 @@ |
|||||||
|
import { useEffect, useState } from 'react'; |
||||||
|
import type { BuiltInRoadmap } from './PersonalDashboard'; |
||||||
|
import { MarkFavorite } from '../FeaturedItems/MarkFavorite'; |
||||||
|
|
||||||
|
type RecommendedRoadmapsProps = { |
||||||
|
roadmaps: BuiltInRoadmap[]; |
||||||
|
isLoading: boolean; |
||||||
|
}; |
||||||
|
|
||||||
|
export function RecommendedRoadmaps(props: RecommendedRoadmapsProps) { |
||||||
|
const { roadmaps, isLoading } = props; |
||||||
|
|
||||||
|
const [showAll, setShowAll] = useState(false); |
||||||
|
const roadmapsToShow = showAll ? roadmaps : roadmaps.slice(0, 12); |
||||||
|
|
||||||
|
const [isMounted, setIsMounted] = useState(false); |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
setIsMounted(true); |
||||||
|
}, []); |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
setShowAll(roadmaps.length < 12); |
||||||
|
}, [roadmaps]); |
||||||
|
|
||||||
|
return ( |
||||||
|
<> |
||||||
|
<h2 className="mb-3 mt-8 text-xs uppercase text-gray-400"> |
||||||
|
Recommended Roadmaps |
||||||
|
</h2> |
||||||
|
|
||||||
|
{isLoading ? ( |
||||||
|
<div className="grid grid-cols-1 gap-1.5 sm:grid-cols-2 md:grid-cols-3"> |
||||||
|
{Array.from({ length: 12 }).map((_, index) => ( |
||||||
|
<RecommendedCardSkeleton key={index} /> |
||||||
|
))} |
||||||
|
</div> |
||||||
|
) : ( |
||||||
|
<div className="relative"> |
||||||
|
<div className="grid grid-cols-1 gap-1.5 sm:grid-cols-2 md:grid-cols-3"> |
||||||
|
{roadmapsToShow.map((roadmap) => ( |
||||||
|
<div className="relative w-full" key={roadmap.id}> |
||||||
|
<a |
||||||
|
key={roadmap.id} |
||||||
|
className="block rounded-md border bg-white px-3 py-2 text-left text-sm shadow-sm transition-all hover:border-gray-300 hover:bg-gray-50" |
||||||
|
href={roadmap.url} |
||||||
|
> |
||||||
|
{roadmap.title} |
||||||
|
</a> |
||||||
|
|
||||||
|
{isMounted && ( |
||||||
|
<MarkFavorite |
||||||
|
resourceId={roadmap.id} |
||||||
|
resourceType={ |
||||||
|
roadmap.url.includes('best-practices') |
||||||
|
? 'best-practice' |
||||||
|
: 'roadmap' |
||||||
|
} |
||||||
|
className='data-[is-favorite="true"]:text-gray-400' |
||||||
|
/> |
||||||
|
)} |
||||||
|
</div> |
||||||
|
))} |
||||||
|
</div> |
||||||
|
|
||||||
|
{!showAll && ( |
||||||
|
<div |
||||||
|
className="pointer-events-none absolute inset-0 z-50 -m-1 flex items-end justify-center bg-gradient-to-t from-white to-transparent" |
||||||
|
style={{ |
||||||
|
background: |
||||||
|
'linear-gradient(180deg, rgba(249,250,251,0) 0%, rgba(249,250,251,0.8) 50%, rgba(249,250,251,1) 100%)', |
||||||
|
}} |
||||||
|
> |
||||||
|
<button |
||||||
|
className="pointer-events-auto text-sm font-medium text-gray-600 hover:text-black focus:outline-none" |
||||||
|
onClick={() => setShowAll(true)} |
||||||
|
> |
||||||
|
+ Show all |
||||||
|
</button> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
</div> |
||||||
|
)} |
||||||
|
</> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
function RecommendedCardSkeleton() { |
||||||
|
return ( |
||||||
|
<div className="h-[38px] w-full animate-pulse rounded-md bg-gray-200" /> |
||||||
|
); |
||||||
|
} |
||||||
Loading…
Reference in new issue