chore: mark favorite

src/components/BestPracticeHeader.astro

@@ -22,9 +22,17 @@ const isBestPracticeReady = !isUpcoming;
 <div class="border-b">
   <div class="container relative py-5 sm:py-12">
     <div class="mb-3 mt-0 sm:mb-6">
+      <div class="flex items-center gap-3">
         <h1 class="mb-0.5 text-2xl font-bold sm:mb-2 sm:text-4xl">
           {title}
         </h1>
+        <MarkFavorite
+          resourceId={bestPracticeId}
+          resourceType="best-practice"
+          className="text-gray-500 !opacity-100 hover:text-gray-600 [&>svg]:stroke-[1] [&>svg]:stroke-gray-500 hover:[&>svg]:stroke-gray-600 [&>svg]:h-4 [&>svg]:w-4"
+          client:load
+        />
+      </div>
       <p class="text-sm text-gray-500 sm:text-lg">{description}</p>
     </div>
 
@@ -80,13 +88,6 @@ const isBestPracticeReady = !isUpcoming;
 
       {
         isBestPracticeReady && (
-          <div class="flex items-center gap-1 sm:gap-2">
-            <MarkFavorite
-              resourceId={bestPracticeId}
-              resourceType="best-practice"
-              className="flex h-7 w-7 items-center justify-center rounded-md bg-gray-500 text-white !opacity-100 hover:bg-gray-600 sm:h-8 sm:w-8"
-              client:load
-            />
             <a
               href={`https://github.com/kamranahmedse/developer-roadmap/issues/new?title=[Suggestion] ${title}`}
               target="_blank"
@@ -97,7 +98,6 @@ const isBestPracticeReady = !isUpcoming;
               <span class="ml-2 hidden sm:inline">Suggest Changes</span>
               <span class="ml-2 inline sm:hidden">Suggest</span>
             </a>
-          </div>
         )
       }
     </div>

src/components/RoadmapHeader.astro

@@ -41,9 +41,17 @@ const isRoadmapReady = !isUpcoming;
     <YouTubeAlert />
 
     <div class="mb-3 mt-0 sm:mb-4 sm:mt-4">
+      <div class="flex items-center gap-3">
         <h1 class="mb-0.5 text-2xl font-bold sm:mb-2 sm:text-4xl">
           {title}
         </h1>
+        <MarkFavorite
+          resourceId={roadmapId}
+          resourceType="roadmap"
+          className="text-gray-500 !opacity-100 hover:text-gray-600 [&>svg]:stroke-[1] [&>svg]:stroke-gray-500 hover:[&>svg]:stroke-gray-600 [&>svg]:h-4 [&>svg]:w-4"
+          client:load
+        />
+      </div>
       <p class="text-sm text-gray-500 sm:text-lg">{description}</p>
     </div>
 
@@ -114,13 +122,6 @@ const isRoadmapReady = !isUpcoming;
 
       {
         isRoadmapReady && (
-          <div class="flex items-center gap-1 sm:gap-2">
-            <MarkFavorite
-              resourceId={roadmapId}
-              resourceType="roadmap"
-              className="flex h-7 w-7 items-center justify-center rounded-md bg-gray-500 text-white !opacity-100 hover:bg-gray-600 sm:h-8 sm:w-8"
-              client:load
-            />
           <a
             href={`https://github.com/kamranahmedse/developer-roadmap/issues/new?title=[Suggestion] ${title}`}
             target="_blank"
@@ -131,7 +132,6 @@ const isRoadmapReady = !isUpcoming;
             <span class="ml-2 hidden sm:inline">Suggest Changes</span>
             <span class="ml-2 inline sm:hidden">Suggest</span>
           </a>
-          </div>
         )
       }
     </div>