feat: implement roadmap alert (#7116)

* feat: implement roadmap alert

* fix: floating icon position

src/components/CustomRoadmap/CustomRoadmapAlert.tsx

@@ -10,6 +10,7 @@ import { showLoginPopup } from '../../lib/popup.ts';
 import { isLoggedIn } from '../../lib/jwt.ts';
 import { useState } from 'react';
 import { CreateRoadmapModal } from './CreateRoadmap/CreateRoadmapModal.tsx';
+import { RoadmapAlert } from '../RoadmapAlert.tsx';
 
 export function CustomRoadmapAlert() {
   const [isCreatingRoadmap, setIsCreatingRoadmap] = useState(false);
@@ -23,33 +24,18 @@ export function CustomRoadmapAlert() {
           }}
         />
       )}
-      <div className="relative mb-5 mt-0 rounded-md border border-yellow-500 bg-yellow-100 p-2 sm:-mt-6 sm:mb-7 sm:p-2.5">
-        <p className="mb-2.5 mt-2 text-sm text-yellow-800 sm:mb-1.5 sm:mt-1 sm:text-base">
-          This is a custom roadmap made by a community member and is not
-          verified by <span className="font-semibold">roadmap.sh</span>
-        </p>
-        <div className="flex flex-col items-start gap-2 sm:flex-row sm:items-center">
-          <a
-            href="/roadmaps"
-            className="inline-flex items-center gap-1.5 text-sm font-semibold text-yellow-700 underline-offset-2 hover:underline"
-          >
-            <BadgeCheck className="h-4 w-4 stroke-[2.5]" />
-            Visit Official Roadmaps
-          </a>
-          <span className="hidden font-black text-yellow-700 sm:block">
-            &middot;
-          </span>
-          <a
-            href="/community"
-            className="inline-flex items-center gap-1.5 text-sm font-semibold text-yellow-700 underline-offset-2 hover:underline"
-          >
-            <HeartHandshake className="h-4 w-4 stroke-[2.5]" />
-            More Community Roadmaps
-          </a>
-        </div>
 
-        <MessageCircleHeart className="absolute bottom-2 right-2 hidden h-12 w-12 text-yellow-500 opacity-50 sm:block" />
+      <RoadmapAlert
-      </div>
+        title="Community Roadmaps"
+        description={
+          <>
+            This is a custom roadmap made by a community member and is not
+            verified by <span className="font-semibold">roadmap.sh</span>
+          </>
+        }
+        floatingIcon={MessageCircleHeart}
+        className="mb-5 mt-0 sm:-mt-6 sm:mb-7"
+      />
     </>
   );
 }

src/components/GenerateRoadmap/AIRoadmapAlert.tsx

@@ -1,4 +1,5 @@
-import { BadgeCheck, Telescope, Wand } from 'lucide-react';
+import { BadgeCheck, Bot, Telescope, Wand } from 'lucide-react';
+import { RoadmapAlert } from '../RoadmapAlert';
 
 type AIRoadmapAlertProps = {
   isListing?: boolean;
@@ -8,46 +9,20 @@ export function AIRoadmapAlert(props: AIRoadmapAlertProps) {
   const { isListing = false } = props;
 
   return (
-    <div className="mb-3 w-full rounded-xl bg-yellow-100 px-4 py-3 text-yellow-800">
+    <RoadmapAlert
-      <h2 className="flex items-center text-base font-semibold text-yellow-800 sm:text-lg">
+      title={`AI Generated Roadmap${isListing ? 's' : ''}`}
-        AI Generated Roadmap{isListing ? 's' : ''}{' '}
+      badgeText="Beta"
-        <span className="ml-1.5 rounded-md border border-yellow-500 bg-yellow-200 px-1.5 text-xs uppercase tracking-wide text-yellow-800">
+      description={
-          Beta
+        <>
-        </span>
+          {isListing
-      </h2>
+            ? 'These are AI generated roadmaps and are not verified by'
-      <p className="mb-2 mt-1">
+            : 'This is an AI generated roadmap and is not verified by'}{' '}
-        {isListing
+          <span className={'font-semibold'}>roadmap.sh</span>. We are currently
-          ? 'These are AI generated roadmaps and are not verified by'
+          in beta and working hard to improve the quality of the generated
-          : 'This is an AI generated roadmap and is not verified by'}{' '}
+          roadmaps.
-        <span className={'font-semibold'}>roadmap.sh</span>. We are currently in
+        </>
-        beta and working hard to improve the quality of the generated roadmaps.
+      }
-      </p>
+      floatingIcon={Bot}
-      <p className="mb-1.5 mt-2 flex flex-col gap-2 text-sm sm:flex-row">
+    />
-        {isListing ? (
-          <a
-            href="/ai"
-            className="flex items-center gap-1.5 rounded-md border border-yellow-600 px-2 py-1 text-yellow-700 transition-colors hover:bg-yellow-300 hover:text-yellow-800"
-          >
-            <Wand size={15} />
-            Create your own Roadmap with AI
-          </a>
-        ) : (
-          <a
-            href="/ai/explore"
-            className="flex items-center gap-1.5 rounded-md border border-yellow-600 px-2 py-1 text-yellow-700 transition-colors hover:bg-yellow-300 hover:text-yellow-800"
-          >
-            <Telescope size={15} />
-            Explore other AI Roadmaps
-          </a>
-        )}
-        <a
-          href="/roadmaps"
-          className="flex items-center gap-1.5 rounded-md border border-yellow-600 bg-yellow-200 px-2 py-1 text-yellow-800 transition-colors hover:bg-yellow-300"
-        >
-          <BadgeCheck size={15} />
-          Visit Official Roadmaps
-        </a>
-      </p>
-    </div>
   );
 }

src/components/RoadmapAlert.tsx

@@ -0,0 +1,70 @@
+import {
+  BadgeCheck,
+  HeartHandshake,
+  Telescope,
+  type LucideIcon,
+} from 'lucide-react';
+import type { ReactNode } from 'react';
+import { cn } from '../lib/classname';
+
+type RoadmapAlertProps = {
+  title: string;
+  badgeText?: string;
+  description: string | ReactNode;
+  floatingIcon: LucideIcon;
+  className?: string;
+};
+
+export function RoadmapAlert(props: RoadmapAlertProps) {
+  const {
+    title,
+    badgeText,
+    description,
+    floatingIcon: FloatingIcon,
+    className,
+  } = props;
+
+  return (
+    <div
+      className={cn(
+        'relative mb-3 w-full rounded-xl bg-yellow-100 px-4 py-3 text-yellow-800',
+        className,
+      )}
+    >
+      <h2 className="flex items-center text-base font-semibold text-yellow-800 sm:text-lg">
+        {title}{' '}
+        {badgeText && (
+          <span className="ml-1.5 rounded-md border border-yellow-500 bg-yellow-200 px-1.5 text-xs uppercase tracking-wide text-yellow-800">
+            {badgeText}
+          </span>
+        )}
+      </h2>
+      <p className="mb-2 mt-1 text-balance">{description}</p>
+      <p className="mb-1.5 mt-2 flex flex-col gap-2 text-sm md:flex-row">
+        <a
+          href="/roadmaps"
+          className="flex items-center gap-1.5 rounded-md border border-yellow-600 bg-yellow-200 px-2 py-1 text-yellow-800 transition-colors hover:bg-yellow-300"
+        >
+          <BadgeCheck size={15} />
+          Visit Official Roadmaps
+        </a>
+        <a
+          href="/community"
+          className="flex items-center gap-1.5 rounded-md border border-yellow-600 px-2 py-1 text-yellow-700 transition-colors hover:bg-yellow-300 hover:text-yellow-800"
+        >
+          <HeartHandshake size={15} />
+          Explore Community Roadmaps
+        </a>
+        <a
+          href="/ai/explore"
+          className="flex items-center gap-1.5 rounded-md border border-yellow-600 px-2 py-1 text-yellow-700 transition-colors hover:bg-yellow-300 hover:text-yellow-800"
+        >
+          <Telescope size={15} />
+          Explore other AI Roadmaps
+        </a>
+      </p>
+
+      <FloatingIcon className="pointer-events-none absolute right-2 top-2 hidden h-12 w-12 text-yellow-500 opacity-50 sm:block md:bottom-2 md:top-auto" />
+    </div>
+  );
+}