chore: best practices share

src/components/BestPracticeHint.astro

@@ -3,8 +3,9 @@ import ResourceProgressStats from './ResourceProgressStats.astro';
 export interface Props {
   bestPracticeId: string;
 }
+const { bestPracticeId } = Astro.props;
 ---
 
 <div class='mt-4 sm:mt-7 border-0 sm:border rounded-md mb-0 sm:-mb-[65px]'>
-  <ResourceProgressStats />
+  <ResourceProgressStats resourceId={bestPracticeId} resourceType='best-practice' />
 </div>

src/components/UserProgress/UserProgressModal.tsx

@@ -5,7 +5,7 @@ import '../FrameRenderer/FrameRenderer.css';
 import { useOutsideClick } from '../../hooks/use-outside-click';
 import { useKeydown } from '../../hooks/use-keydown';
 import { httpGet } from '../../lib/http';
-import { renderTopicProgress } from '../../lib/resource-progress';
+import { ResourceType, renderTopicProgress } from '../../lib/resource-progress';
 import CloseIcon from '../../icons/close.svg';
 import { useToast } from '../../hooks/use-toast';
 import { deleteUrlParam, getUrlParams } from '../../lib/browser';
@@ -13,7 +13,7 @@ import { useAuth } from '../../hooks/use-auth';
 
 export type ProgressMapProps = {
   resourceId: string;
-  resourceType: 'roadmap' | 'best-practice';
+  resourceType: ResourceType
 };
 
 type UserProgressResponse = {

src/pages/best-practices/[bestPracticeId]/index.astro

@@ -6,6 +6,7 @@ import ShareIcons from '../../../components/ShareIcons/ShareIcons.astro';
 import { TopicDetail } from '../../../components/TopicDetail/TopicDetail';
 import UpcomingForm from '../../../components/UpcomingForm.astro';
 import BaseLayout from '../../../layouts/BaseLayout.astro';
+import { UserProgressModal } from '../../../components/UserProgress/UserProgressModal';
 import {
 BestPracticeFrontmatter,
 getBestPracticeIds,
@@ -90,7 +91,6 @@ const contentContributionLink = `https://github.com/kamranahmedse/developer-road
           <FrameRenderer
             resourceType={'best-practice'}
             resourceId={bestPracticeId}
-            jsonUrl={bestPracticeData.jsonUrl}
             dimensions={bestPracticeData.dimensions}
           />
         </div>
@@ -106,5 +106,11 @@ const contentContributionLink = `https://github.com/kamranahmedse/developer-road
     }
   </div>
 
+  <UserProgressModal
+  resourceId={bestPracticeId}
+  resourceType='best-practice'
+  client:only
+/>
+
   {bestPracticeData.isUpcoming && <UpcomingForm />}
 </BaseLayout>