Add community roadmap alert

src/components/CustomRoadmap/CustomRoadmapAlert.tsx

@@ -0,0 +1,55 @@
+import { BadgeCheck, MessageCircleHeart, PencilRuler } from 'lucide-react';
+import { showLoginPopup } from '../../lib/popup.ts';
+import { isLoggedIn } from '../../lib/jwt.ts';
+import { useState } from 'react';
+import { CreateRoadmapModal } from './CreateRoadmap/CreateRoadmapModal.tsx';
+
+export function CustomRoadmapAlert() {
+  const [isCreatingRoadmap, setIsCreatingRoadmap] = useState(false);
+
+  return (
+    <>
+      {isCreatingRoadmap && (
+        <CreateRoadmapModal
+          onClose={() => {
+            setIsCreatingRoadmap(false);
+          }}
+        />
+      )}
+      <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">
+        <h2 className="text-base font-semibold text-yellow-800 sm:text-lg">
+          Community Roadmap
+        </h2>
+        <p className="mt-2 mb-2.5 sm:mb-1.5 sm:mt-1 text-sm text-yellow-800 sm:text-base">
+          This is a custom roadmap made by community and isn't verified by{' '}
+          <span className="font-semibold">roadmap.sh</span>
+        </p>
+        <div className="flex items-start sm:items-center flex-col sm:flex-row gap-2">
+          <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="font-black text-yellow-700 hidden sm:block">&middot;</span>
+          <button
+            className="inline-flex items-center gap-1.5 text-sm font-semibold text-yellow-700 underline-offset-2 hover:underline"
+            onClick={() => {
+              if (!isLoggedIn()) {
+                showLoginPopup();
+              } else {
+                setIsCreatingRoadmap(true);
+              }
+            }}
+          >
+            <PencilRuler className="h-4 w-4 stroke-[2.5]" />
+            Create Your Own Roadmap
+          </button>
+        </div>
+
+        <MessageCircleHeart className="absolute bottom-2 right-2 hidden h-12 w-12 text-yellow-500 opacity-50 sm:block" />
+      </div>
+    </>
+  );
+}

src/components/CustomRoadmap/RoadmapHeader.tsx

@@ -12,6 +12,7 @@ import { Lock, Shapes } from 'lucide-react';
 import { Modal } from '../Modal';
 import { ShareSuccess } from '../ShareOptions/ShareSuccess';
 import { ShareRoadmapButton } from '../ShareRoadmapButton.tsx';
+import { CustomRoadmapAlert } from './CustomRoadmapAlert.tsx';
 
 type RoadmapHeaderProps = {};
 
@@ -89,6 +90,8 @@ export function RoadmapHeader(props: RoadmapHeaderProps) {
   return (
     <div className="border-b">
       <div className="container relative py-5 sm:py-12">
+        {!$canManageCurrentRoadmap && <CustomRoadmapAlert />}
+
         {creator?.name && (
           <div className="-mb-1 flex items-center gap-1.5 text-sm text-gray-500">
             <img

src/components/NavigationDropdown.tsx

@@ -1,5 +1,4 @@
 import {
-  BookOpen,
   BookOpenText,
   CheckSquare,
   FileQuestion,

src/env.d.ts

@@ -1,4 +1,4 @@
-import 'astro/client';
+/// <reference types="astro/client" />
 
 interface ImportMetaEnv {
   GITHUB_SHA: string;