Show resource progress on best practices

src/components/BestPracticeHint.astro

@@ -1,20 +1,10 @@
 ---
+import ResourceProgressStats from './ResourceProgressStats.astro';
 export interface Props {
   bestPracticeId: string;
 }
 ---
 
 <div class='mt-4 sm:mt-7 border-0 sm:border rounded-md mb-0 sm:-mb-[65px]'>
-  <!-- Desktop: Roadmap Resources - Alert -->
-  <div class='hidden sm:flex justify-between px-2 bg-white items-center rounded-md p-1.5'>
-    <p class='text-sm'>
-      <span class='text-yellow-900 bg-yellow-200 py-0.5 px-1 text-xs rounded-sm font-medium uppercase mr-0.5'>Tip</span>
-      Click the best practices for details and resources
-    </p>
-  </div>
-
-  <!-- Mobile - Roadmap resources alert -->
-  <p class='block sm:hidden text-sm border border-yellow-500 text-yellow-700 rounded-md py-1.5 px-2 bg-white relative'>
-    Click the best practices for details and resources
-  </p>
+  <ResourceProgressStats />
 </div>

src/components/ResourceProgressStats.astro

@@ -0,0 +1,57 @@
+---
+export interface Props {
+  isSecondaryBanner?: boolean;
+}
+
+const { isSecondaryBanner = false } = Astro.props;
+---
+
+<div
+  data-progress-nums-container
+  class:list={[
+    'hidden sm:flex justify-between px-2 bg-white items-center py-1.5 relative striped-loader bg-white',
+    {
+      'rounded-bl-md rounded-br-md': isSecondaryBanner,
+      'rounded-md': !isSecondaryBanner,
+    },
+  ]}
+>
+  <p
+    class='flex text-sm opacity-0 transition-opacity duration-300'
+    data-progress-nums
+  >
+    <span
+      class='mr-2.5 rounded-sm bg-yellow-200 px-1 py-0.5 text-xs font-medium uppercase text-yellow-900'
+    >
+      <span data-progress-percentage>0</span>% Done
+    </span>
+
+    <span><span data-progress-done>0</span> completed</span><span
+      class='mx-1.5 text-gray-400'>&middot;</span
+    >
+    <span><span data-progress-learning>0</span> in progress</span><span
+      class='mx-1.5 text-gray-400'>&middot;</span
+    >
+    <span><span data-progress-skipped>0</span> skipped</span><span
+      class='mx-1.5 text-gray-400'>&middot;</span
+    >
+    <span><span data-progress-total>0</span> Total</span>
+  </p>
+</div>
+
+<p
+  data-progress-nums-container
+  class='relative block rounded-md border bg-white px-2 py-1.5 text-sm text-sm text-gray-700 sm:hidden striped-loader bg-white -mb-2'
+>
+  <span data-progress-nums class='opacity-0 transition-opacity duration-300'>
+    <span
+      class='mr-2.5 rounded-sm bg-yellow-200 px-1 py-0.5 text-xs font-medium uppercase text-yellow-900'
+    >
+      <span data-progress-percentage>0</span>% Done
+    </span>
+
+    <span>
+      <span data-progress-done>0</span> of <span data-progress-total>0</span> Done
+    </span>
+  </span>
+</p>

src/components/RoadmapHint.astro

@@ -2,6 +2,7 @@
 import { ClearProgress } from './Activity/ClearProgress';
 import AstroIcon from './AstroIcon.astro';
 import Icon from './AstroIcon.astro';
+import ResourceProgressStats from './ResourceProgressStats.astro';
 
 export interface Props {
   roadmapId: string;
@@ -43,32 +44,5 @@ const roadmapTitle =
     )
   }
 
-  <!-- Desktop: Roadmap Resources - Alert -->
-  <div id="progress-nums-container"
-    class:list={[
-      'hidden sm:flex justify-between px-2 bg-white items-center py-1.5 relative striped-loader bg-white',
-      {
-        'rounded-bl-md rounded-br-md': hasTNSBanner,
-        'rounded-md': !hasTNSBanner,
-      },
-    ]}
-  >
-    <p class='text-sm flex opacity-0 transition-opacity duration-300' id="progress-nums">
-      <span class="font-medium py-0.5 rounded-sm text-xs uppercase bg-yellow-200 px-1 text-yellow-900 mr-2.5">
-        <span class="progress-percentage">0</span>% Done
-      </span>
-
-      <span><span class="progress-done">0</span> completed</span><span class="mx-1.5 text-gray-400">&middot;</span>
-      <span><span class="progress-learning">0</span> learning</span><span class="mx-1.5 text-gray-400">&middot;</span>
-      <span><span class="progress-skipped">0</span> skipped</span><span class="mx-1.5 text-gray-400">&middot;</span>
-      <span><span class="progress-total">0</span> Total</span>
-    </p>
-  </div>
-
-  <!-- Mobile - Roadmap resources alert -->
-  <p
-    class='relative block rounded-md border border-yellow-500 bg-white px-2 py-1.5 text-sm text-yellow-700 sm:hidden'
-  >
-    Track your progress and learn about the topics by clicking the roadmap items.
-  </p>
+  <ResourceProgressStats isSecondaryBanner={hasTNSBanner} />
 </div>

src/components/TopicDetail/TopicDetail.tsx

@@ -10,6 +10,7 @@ import { httpGet } from '../../lib/http';
 import { isLoggedIn } from '../../lib/jwt';
 import {
   isTopicDone,
+  refreshProgressCounters,
   renderTopicProgress,
   ResourceType,
   updateResourceProgress as updateResourceProgressApi,
@@ -87,6 +88,7 @@ export function TopicDetail() {
           topicId,
           done.includes(topicId) ? 'done' : 'pending'
         );
+        refreshProgressCounters();
       })
       .catch((err) => {
         alert(err.message);