feat: add mark favourite button

src/components/Roadmaps/RoadmapCard.tsx

@@ -0,0 +1,31 @@
+import { useIsMounted } from '../../hooks/use-is-mounted';
+import { MarkFavorite } from '../FeaturedItems/MarkFavorite';
+import type { GroupType } from './RoadmapsPage';
+
+type RoadmapCardProps = {
+  roadmap: GroupType['roadmaps'][number];
+};
+
+export function RoadmapCard(props: RoadmapCardProps) {
+  const { roadmap } = props;
+
+  const isMounted = useIsMounted();
+
+  return (
+    <a
+      key={roadmap.link}
+      className="relative rounded-md border bg-white px-3 py-2 text-left text-sm shadow-sm transition-all hover:border-gray-300 hover:bg-gray-50"
+      href={roadmap.link}
+    >
+      {roadmap.title}
+
+      {isMounted && (
+        <MarkFavorite
+          resourceId={roadmap.link.split('/').pop()!}
+          resourceType="roadmap"
+          className="data-[is-favorite=true]:opacity-35"
+        />
+      )}
+    </a>
+  );
+}

src/components/Roadmaps/RoadmapsPage.tsx

@@ -8,6 +8,7 @@ import {
   getUrlParams,
   setUrlParams,
 } from '../../lib/browser.ts';
+import { RoadmapCard } from './RoadmapCard.tsx';
 
 const groupNames = [
   'Absolute Beginners',
@@ -27,7 +28,7 @@ const groupNames = [
 
 type AllowGroupNames = (typeof groupNames)[number];
 
-type GroupType = {
+export type GroupType = {
   group: AllowGroupNames;
   roadmaps: {
     title: string;
@@ -547,13 +548,7 @@ export function RoadmapsPage() {
 
               <div className="grid grid-cols-1 gap-1.5 sm:grid-cols-2 md:grid-cols-3">
                 {group.roadmaps.map((roadmap) => (
-                  <a
+                  <RoadmapCard roadmap={roadmap} key={roadmap.link} />
-                    key={roadmap.link}
-                    className="rounded-md border bg-white px-3 py-2 text-left text-sm shadow-sm transition-all hover:border-gray-300 hover:bg-gray-50"
-                    href={roadmap.link}
-                  >
-                    {roadmap.title}
-                  </a>
                 ))}
               </div>
             </div>

src/hooks/use-is-mounted.ts

@@ -0,0 +1,13 @@
+import { useEffect, useState } from 'react';
+
+export function useIsMounted() {
+  const [isMounted, setIsMounted] = useState(false);
+  useEffect(() => {
+    setIsMounted(true);
+
+    return () => {
+      setIsMounted(false);
+    };
+  }, []);
+  return isMounted;
+}