From 6abc5ff916706367df8f00fb50608b5060be69cf Mon Sep 17 00:00:00 2001 From: Kamran Ahmed Date: Mon, 10 Feb 2025 23:21:20 +0000 Subject: [PATCH] Move to separate files --- .astro/settings.json | 2 +- .../Dashboard/PersonalDashboard.tsx | 4 +- .../HeroSection/FavoriteRoadmaps.tsx | 223 ++++-------------- src/components/HeroSection/HeroProject.tsx | 52 ++++ src/components/HeroSection/HeroRoadmap.tsx | 74 ++++++ src/components/HeroSection/HeroTitle.tsx | 28 +++ 6 files changed, 200 insertions(+), 183 deletions(-) create mode 100644 src/components/HeroSection/HeroProject.tsx create mode 100644 src/components/HeroSection/HeroRoadmap.tsx create mode 100644 src/components/HeroSection/HeroTitle.tsx diff --git a/.astro/settings.json b/.astro/settings.json index 9aa9d76f8..50ff25a6a 100644 --- a/.astro/settings.json +++ b/.astro/settings.json @@ -3,6 +3,6 @@ "enabled": false }, "_variables": { - "lastUpdateCheck": 1738019390029 + "lastUpdateCheck": 1739229597159 } } \ No newline at end of file diff --git a/src/components/Dashboard/PersonalDashboard.tsx b/src/components/Dashboard/PersonalDashboard.tsx index a90081a25..a6ca134b2 100644 --- a/src/components/Dashboard/PersonalDashboard.tsx +++ b/src/components/Dashboard/PersonalDashboard.tsx @@ -17,11 +17,11 @@ import { $accountStreak, type StreakResponse } from '../../stores/streak'; import type { PageType } from '../CommandMenu/CommandMenu'; import { FavoriteRoadmaps, - HeroRoadmap, type AIRoadmapType, } from '../HeroSection/FavoriteRoadmaps.tsx'; import type { ProjectStatusDocument } from '../Projects/ListProjectSolutions'; import type { UserProgress } from '../TeamProgress/TeamProgressPage'; +import { HeroRoadmap } from '../HeroSection/HeroRoadmap.tsx'; type UserDashboardResponse = { name: string; @@ -106,7 +106,7 @@ function DashboardStats(props: DashboardStatsProps) { } = props; return ( -
+
- - {resourceTitle} - - - {isTrackable && ( - - )} - - {allowFavorite && ( - - )} - - {isNew && ( - - - - - - New - - )} - - ); -} - -type HeroTitleProps = { - icon: any; - isLoading?: boolean; - title: string | ReactNode; - rightContent?: ReactNode; -}; - -function HeroTitle(props: HeroTitleProps) { - const { isLoading = false, title, icon, rightContent } = props; - - return ( -
-

- {!isLoading && icon} - {isLoading && ( - - - - )} - {title} -

-
{rightContent}
-
- ); -} - type FavoriteRoadmapsProps = { progress: UserProgress[]; projects: (ProjectStatusDocument & { @@ -137,56 +33,15 @@ type FavoriteRoadmapsProps = { isAllCollapsed: boolean; }; -type HeroProjectProps = { - project: ProjectStatusDocument & { - title: string; - }; -}; - -export function HeroProject({ project }: HeroProjectProps) { - return ( - -
-

- {project.title} -

- - {project.submittedAt && project.repositoryUrl ? 'Done' : ''} - -
-
- {project.submittedAt && project.repositoryUrl && ( - - - {project.upvotes} - - )} - {project.startedAt && ( - Started {getRelativeTimeString(project.startedAt)} - )} -
- -
- {project.submittedAt && project.repositoryUrl && ( -
- )} - - ); -} - export function FavoriteRoadmaps(props: FavoriteRoadmapsProps) { - const { progress, isLoading, customRoadmaps, aiRoadmaps, projects, isAllCollapsed } = props; + const { + progress, + isLoading, + customRoadmaps, + aiRoadmaps, + projects, + isAllCollapsed, + } = props; const [showCompleted, setShowCompleted] = useState(false); const completedProjects = projects.filter( @@ -203,10 +58,12 @@ export function FavoriteRoadmaps(props: FavoriteRoadmapsProps) { return (
-
+
{!isLoading && progress.length > 0 && !isAllCollapsed && ( -
+
{progress.map((resource) => (
-
+
) as any} @@ -253,7 +112,7 @@ export function FavoriteRoadmaps(props: FavoriteRoadmapsProps) { title="Your custom roadmaps" /> {!isLoading && customRoadmaps.length > 0 && !isAllCollapsed && ( -
+
{customRoadmaps.map((customRoadmap) => (
-
+
) as any} @@ -286,7 +147,7 @@ export function FavoriteRoadmaps(props: FavoriteRoadmapsProps) { title="Your AI roadmaps" /> {!isLoading && aiRoadmaps.length > 0 && !isAllCollapsed && ( -
+
{aiRoadmaps.map((aiRoadmap) => (
-
+
{!isLoading && projectsToShow.length > 0 && !isAllCollapsed && ( -
+
{projectsToShow.map((project) => ( ))} diff --git a/src/components/HeroSection/HeroProject.tsx b/src/components/HeroSection/HeroProject.tsx new file mode 100644 index 000000000..c86f08076 --- /dev/null +++ b/src/components/HeroSection/HeroProject.tsx @@ -0,0 +1,52 @@ +import { ThumbsUp } from 'lucide-react'; +import { cn } from '../../lib/classname.ts'; +import { getRelativeTimeString } from '../../lib/date'; +import type { ProjectStatusDocument } from '../Projects/ListProjectSolutions.tsx'; + +type HeroProjectProps = { + project: ProjectStatusDocument & { + title: string; + }; +}; + +export function HeroProject({ project }: HeroProjectProps) { + return ( + +
+

+ {project.title} +

+ + {project.submittedAt && project.repositoryUrl ? 'Done' : ''} + +
+
+ {project.submittedAt && project.repositoryUrl && ( + + + {project.upvotes} + + )} + {project.startedAt && ( + Started {getRelativeTimeString(project.startedAt)} + )} +
+ +
+ {project.submittedAt && project.repositoryUrl && ( +
+ )} + + ); +} \ No newline at end of file diff --git a/src/components/HeroSection/HeroRoadmap.tsx b/src/components/HeroSection/HeroRoadmap.tsx new file mode 100644 index 000000000..c8f15ad2e --- /dev/null +++ b/src/components/HeroSection/HeroRoadmap.tsx @@ -0,0 +1,74 @@ +import { cn } from '../../lib/classname.ts'; +import type { ResourceType } from '../../lib/resource-progress.ts'; +import { MarkFavorite } from '../FeaturedItems/MarkFavorite.tsx'; + +type ProgressRoadmapProps = { + url: string; + percentageDone: number; + allowFavorite?: boolean; + + resourceId: string; + resourceType: ResourceType; + resourceTitle: string; + isFavorite?: boolean; + + isTrackable?: boolean; + isNew?: boolean; +}; + +export function HeroRoadmap(props: ProgressRoadmapProps) { + const { + url, + percentageDone, + resourceType, + resourceId, + resourceTitle, + isFavorite, + allowFavorite = true, + isTrackable = true, + isNew = false, + } = props; + + return ( + + + {resourceTitle} + + + {isTrackable && ( + + )} + + {allowFavorite && ( + + )} + + {isNew && ( + + + + + + New + + )} + + ); +} \ No newline at end of file diff --git a/src/components/HeroSection/HeroTitle.tsx b/src/components/HeroSection/HeroTitle.tsx new file mode 100644 index 000000000..db812bfff --- /dev/null +++ b/src/components/HeroSection/HeroTitle.tsx @@ -0,0 +1,28 @@ +import type { ReactNode } from 'react'; +import { Spinner } from '../ReactIcons/Spinner.tsx'; + +type HeroTitleProps = { + icon: any; + isLoading?: boolean; + title: string | ReactNode; + rightContent?: ReactNode; +}; + +export function HeroTitle(props: HeroTitleProps) { + const { isLoading = false, title, icon, rightContent } = props; + + return ( +
+

+ {!isLoading && icon} + {isLoading && ( + + + + )} + {title} +

+
{rightContent}
+
+ ); +} \ No newline at end of file