Hero roadmap section updates

src/components/CustomRoadmap/CreateRoadmap/CreateRoadmapButton.tsx

@@ -12,10 +12,12 @@ import { useState } from 'react';
 type CreateRoadmapButtonProps = {
   className?: string;
   type?: AllowedCustomRoadmapType;
+  text?: string;
+  teamId?: string;
 };
 
 export function CreateRoadmapButton(props: CreateRoadmapButtonProps) {
-  const { className, type } = props;
+  const { teamId, className, type, text = 'Create your own Roadmap' } = props;
 
   const [isCreatingRoadmap, setIsCreatingRoadmap] = useState(false);
 
@@ -31,6 +33,7 @@ export function CreateRoadmapButton(props: CreateRoadmapButtonProps) {
     <>
       {isCreatingRoadmap && (
         <CreateRoadmapModal
+          teamId={teamId}
           type={type}
           onClose={() => {
             setIsCreatingRoadmap(false);
@@ -46,7 +49,7 @@ export function CreateRoadmapButton(props: CreateRoadmapButtonProps) {
         onClick={toggleCreateRoadmapHandler}
       >
         <Plus size={16} />
-        Create your own Roadmap
+        {text}
       </button>
     </>
   );

src/components/HeroSection/FavoriteRoadmaps.tsx

@@ -1,8 +1,9 @@
 import { useEffect, useState } from 'react';
 import { EmptyProgress } from './EmptyProgress';
 import { httpGet } from '../../lib/http';
-import { HeroRoadmaps } from './HeroRoadmaps';
+import { HeroRoadmaps, type HeroTeamRoadmaps } from './HeroRoadmaps';
 import { isLoggedIn } from '../../lib/jwt';
+import type { AllowedMemberRoles } from '../ShareOptions/ShareTeamMemberList.tsx';
 
 export type UserProgressResponse = {
   resourceId: string;
@@ -15,6 +16,11 @@ export type UserProgressResponse = {
   total: number;
   updatedAt: Date;
   isCustomResource: boolean;
+  team?: {
+    name: string;
+    id: string;
+    role: AllowedMemberRoles;
+  };
 }[];
 
 function renderProgress(progressList: UserProgressResponse) {
@@ -114,8 +120,22 @@ export function FavoriteRoadmaps() {
   }
 
   const hasProgress = progress?.length > 0;
-  const customRoadmaps = progress?.filter((p) => p.isCustomResource);
+  const customRoadmaps = progress?.filter(
+    (p) => p.isCustomResource && !p.team?.name
+  );
   const defaultRoadmaps = progress?.filter((p) => !p.isCustomResource);
+  const teamRoadmaps: HeroTeamRoadmaps = progress
+    ?.filter((p) => p.isCustomResource && p.team?.name)
+    .reduce((acc: HeroTeamRoadmaps, curr) => {
+      const currTeam = curr.team!;
+      if (!acc[currTeam.name]) {
+        acc[currTeam.name] = [];
+      }
+
+      acc[currTeam.name].push(curr);
+
+      return acc;
+    }, {});
 
   return (
     <div
@@ -130,6 +150,7 @@ export function FavoriteRoadmaps() {
           {!isLoading && progress?.length == 0 && <EmptyProgress />}
           {hasProgress && (
             <HeroRoadmaps
+              teamRoadmaps={teamRoadmaps}
               customRoadmaps={customRoadmaps}
               progress={defaultRoadmaps}
               isLoading={isLoading}

src/components/HeroSection/HeroRoadmaps.tsx

@@ -3,10 +3,10 @@ import { CheckIcon } from '../ReactIcons/CheckIcon';
 import { MarkFavorite } from '../FeaturedItems/MarkFavorite';
 import { Spinner } from '../ReactIcons/Spinner';
 import type { ResourceType } from '../../lib/resource-progress';
-import { MapIcon } from 'lucide-react';
+import { MapIcon, Users2 } from 'lucide-react';
 import { CreateRoadmapButton } from '../CustomRoadmap/CreateRoadmap/CreateRoadmapButton';
 import { CreateRoadmapModal } from '../CustomRoadmap/CreateRoadmap/CreateRoadmapModal';
-import { useState } from 'react';
+import { type ReactNode, useState } from 'react';
 import { TeamAnnouncement } from '../TeamAnnouncement';
 
 type ProgressRoadmapProps = {
@@ -56,7 +56,7 @@ function HeroRoadmap(props: ProgressRoadmapProps) {
 type ProgressTitleProps = {
   icon: any;
   isLoading?: boolean;
-  title: string;
+  title: string | ReactNode;
 };
 
 export function HeroTitle(props: ProgressTitleProps) {
@@ -74,25 +74,39 @@ export function HeroTitle(props: ProgressTitleProps) {
     </p>
   );
 }
+export type HeroTeamRoadmaps = Record<string, UserProgressResponse>;
 
 type ProgressListProps = {
   progress: UserProgressResponse;
   customRoadmaps: UserProgressResponse;
+  teamRoadmaps?: HeroTeamRoadmaps;
   isLoading?: boolean;
 };
 
 export function HeroRoadmaps(props: ProgressListProps) {
-  const { progress, isLoading = false, customRoadmaps } = props;
+  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 text-sm mt-2">
+      <p className="mb-7 mt-2 text-sm">
         <TeamAnnouncement />
       </p>
       {isCreatingRoadmap && (
-        <CreateRoadmapModal onClose={() => setIsCreatingRoadmap(false)} />
+        <CreateRoadmapModal
+          teamId={creatingRoadmapTeamId}
+          onClose={() => {
+            setIsCreatingRoadmap(false);
+            setCreatingRoadmapTeamId(undefined);
+          }}
+        />
       )}
       {
         <HeroTitle
@@ -168,6 +182,83 @@ export function HeroRoadmaps(props: ProgressListProps) {
           </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">
+            {
+              <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/progress?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?id=${customRoadmap.resourceId}`}
+                      allowFavorite={false}
+                    />
+                  );
+                })}
+
+                {canManageTeam && (
+                  <CreateRoadmapButton
+                    teamId={currentTeam?.id}
+                    text="Create Team Roadmap"
+                  />
+                )}
+              </div>
+            )}
+          </div>
+        );
+      })}
     </div>
   );
 }