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">
-      <h1 class="mb-0.5 text-2xl font-bold sm:mb-2 sm:text-4xl">
-        {title}
-      </h1>
+      <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">
-      <h1 class="mb-0.5 text-2xl font-bold sm:mb-2 sm:text-4xl">
-        {title}
-      </h1>
+      <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,24 +122,16 @@ 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"
-              class="inline-flex items-center justify-center rounded-md bg-gray-500 px-3 py-1.5 text-xs font-medium text-white hover:bg-gray-600 sm:text-sm"
-              aria-label="Suggest Changes"
-            >
-              <Icon icon="comment" class="h-3 w-3" />
-              <span class="ml-2 hidden sm:inline">Suggest Changes</span>
-              <span class="ml-2 inline sm:hidden">Suggest</span>
-            </a>
-          </div>
+          <a
+            href={`https://github.com/kamranahmedse/developer-roadmap/issues/new?title=[Suggestion] ${title}`}
+            target="_blank"
+            class="inline-flex items-center justify-center rounded-md bg-gray-500 px-3 py-1.5 text-xs font-medium text-white hover:bg-gray-600 sm:text-sm"
+            aria-label="Suggest Changes"
+          >
+            <Icon icon="comment" class="h-3 w-3" />
+            <span class="ml-2 hidden sm:inline">Suggest Changes</span>
+            <span class="ml-2 inline sm:hidden">Suggest</span>
+          </a>
         )
       }
     </div>