feat: team member progress modal (#5651)

* feat: restrict members

* feat: member progress modal

src/components/Activity/ActivityStream.tsx

@@ -31,10 +31,15 @@ export type UserStreamActivity = {
 type ActivityStreamProps = {
   activities: UserStreamActivity[];
   className?: string;
+  onResourceClick?: (
+    resourceId: string,
+    resourceType: ResourceType,
+    isCustomResource: boolean,
+  ) => void;
 };
 
 export function ActivityStream(props: ActivityStreamProps) {
-  const { activities, className } = props;
+  const { activities, className, onResourceClick } = props;
 
   const [showAll, setShowAll] = useState(false);
   const [selectedActivity, setSelectedActivity] =
@@ -92,15 +97,25 @@ export function ActivityStream(props: ActivityStreamProps) {
                     ? `/r/${resourceSlug}`
                     : `/${resourceId}`;
 
-            const resourceLinkComponent = (
-              <a
-                className="font-medium underline transition-colors hover:cursor-pointer hover:text-black"
-                target="_blank"
-                href={resourceUrl}
-              >
-                {resourceTitle}
-              </a>
-            );
+            const resourceLinkComponent =
+              onResourceClick && resourceType !== 'question' ? (
+                <button
+                  className="font-medium underline transition-colors hover:cursor-pointer hover:text-black"
+                  onClick={() =>
+                    onResourceClick(resourceId, resourceType, isCustomResource!)
+                  }
+                >
+                  {resourceTitle}
+                </button>
+              ) : (
+                <a
+                  className="font-medium underline transition-colors hover:cursor-pointer hover:text-black"
+                  target="_blank"
+                  href={resourceUrl}
+                >
+                  {resourceTitle}
+                </a>
+              );
 
             const topicCount = topicTitles?.length || 0;
 

src/components/Activity/ResourceProgress.tsx

@@ -17,6 +17,7 @@ type ResourceProgressType = {
   isCustomResource: boolean;
   roadmapSlug?: string;
   showActions?: boolean;
+  onResourceClick?: () => void;
 };
 
 export function ResourceProgress(props: ResourceProgressType) {
@@ -24,6 +25,7 @@ export function ResourceProgress(props: ResourceProgressType) {
     showClearButton = true,
     isCustomResource,
     showActions = true,
+    onResourceClick,
   } = props;
 
   const userId = getUser()?.id;
@@ -53,13 +55,21 @@ export function ResourceProgress(props: ResourceProgressType) {
   const totalMarked = doneCount + skippedCount;
   const progressPercentage = getPercentage(totalMarked, totalCount);
 
+  const Slot = onResourceClick ? 'button' : 'a';
+
   return (
     <div className="relative">
-      <a
-        target="_blank"
-        href={url}
+      <Slot
+        {...(onResourceClick
+          ? {
+              onClick: onResourceClick,
+            }
+          : {
+              href: url,
+              target: '_blank',
+            })}
         className={cn(
-          'group relative flex items-center justify-between overflow-hidden rounded-md border border-gray-300 bg-white px-3 py-2 text-left text-sm transition-all hover:border-gray-400',
+          'group relative flex w-full items-center justify-between overflow-hidden rounded-md border border-gray-300 bg-white px-3 py-2 text-left text-sm transition-all hover:border-gray-400',
           showActions ? 'pr-7' : '',
         )}
       >
@@ -74,7 +84,7 @@ export function ResourceProgress(props: ResourceProgressType) {
             width: `${progressPercentage}%`,
           }}
         ></span>
-      </a>
+      </Slot>
 
       {showActions && (
         <div className="absolute right-2 top-0 flex h-full items-center">