From e351f653a1c91c49090cecea87b8c05e42b1fb75 Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Mon, 3 Feb 2025 13:28:54 +0000
Subject: [PATCH] Add banner on top

---
 src/components/Navigation/Navigation.astro    |  3 ++
 src/components/OnboardingNudge.tsx            |  3 ++
 src/components/RoadmapHeader.astro            |  2 +-
 .../SQLCourse/CourseAnnouncement.tsx          | 53 +++++++++++++++++++
 .../content/mysql@VPxOdjJtKAqmM5V0LR5OC.md    |  2 +-
 5 files changed, 61 insertions(+), 2 deletions(-)
 create mode 100644 src/components/SQLCourse/CourseAnnouncement.tsx

diff --git a/src/components/Navigation/Navigation.astro b/src/components/Navigation/Navigation.astro
index ee39d904a..f391990fd 100644
--- a/src/components/Navigation/Navigation.astro
+++ b/src/components/Navigation/Navigation.astro
@@ -4,8 +4,11 @@ import Icon from '../AstroIcon.astro';
 import { NavigationDropdown } from '../NavigationDropdown';
 import { RoadmapDropdownMenu } from '../RoadmapDropdownMenu/RoadmapDropdownMenu';
 import { AccountDropdown } from './AccountDropdown';
+import { CourseAnnouncement } from '../SQLCourse/CourseAnnouncement';
 ---
 
+<CourseAnnouncement client:load />
+
 <div class='bg-slate-900 py-5 text-white sm:py-8'>
   <nav class='container flex items-center justify-between'>
     <div class='flex items-center gap-5'>
diff --git a/src/components/OnboardingNudge.tsx b/src/components/OnboardingNudge.tsx
index 97fb1c330..f2bb862f8 100644
--- a/src/components/OnboardingNudge.tsx
+++ b/src/components/OnboardingNudge.tsx
@@ -37,6 +37,9 @@ export function OnboardingNudge(props: OnboardingNudgeProps) {
     return null;
   }
 
+  // @TODO put it back once <CourseAnnouncement /> is removed
+  return null;
+
   return (
     <div
       className={cn(
diff --git a/src/components/RoadmapHeader.astro b/src/components/RoadmapHeader.astro
index 6a0e5904a..2e6c8124c 100644
--- a/src/components/RoadmapHeader.astro
+++ b/src/components/RoadmapHeader.astro
@@ -13,7 +13,7 @@ import { MarkFavorite } from './FeaturedItems/MarkFavorite';
 import { type RoadmapFrontmatter } from '../lib/roadmap';
 import { ShareRoadmapButton } from './ShareRoadmapButton';
 import { DownloadRoadmapButton } from './DownloadRoadmapButton';
-
+import { CourseAnnouncement } from './SQLCourse/CourseAnnouncement';
 export interface Props {
   title: string;
   description: string;
diff --git a/src/components/SQLCourse/CourseAnnouncement.tsx b/src/components/SQLCourse/CourseAnnouncement.tsx
new file mode 100644
index 000000000..695759383
--- /dev/null
+++ b/src/components/SQLCourse/CourseAnnouncement.tsx
@@ -0,0 +1,53 @@
+import { Database, X } from 'lucide-react';
+import { useEffect, useState } from 'react';
+
+const HIDE_STORAGE_KEY = 'sql-course-announcement-hidden';
+
+export function CourseAnnouncement() {
+  const [isVisible, setIsVisible] = useState(true);
+
+  useEffect(() => {
+    const isHidden = localStorage.getItem(HIDE_STORAGE_KEY) === 'true';
+    if (isHidden) {
+      setIsVisible(false);
+    }
+  }, []);
+
+  if (!isVisible) {
+    return null;
+  }
+
+  return (
+    <div className="sticky top-0 z-[100]">
+      <a
+        href="/courses/sql"
+        className="flex items-center bg-yellow-400 py-1.5"
+      >
+        <span className="container mx-auto flex items-center justify-start sm:justify-center gap-2 text-center sm:gap-4">
+          <span className="flex items-center gap-1.5 text-xs font-medium text-black md:text-base">
+            <Database className="hidden h-4 w-4 flex-shrink-0 text-black sm:block" />
+            <span className="hidden sm:block">
+              Master SQL with our new course
+            </span>
+            <span className="block sm:hidden">Announcing our SQL course</span>
+          </span>
+          <span className="items-center gap-1.5 rounded-full bg-black px-2 py-0.5 text-sm text-xs font-medium uppercase tracking-wide text-white hover:bg-zinc-800 sm:px-3 sm:py-1">
+            <span className="mr-1.5 hidden sm:inline">Start Learning</span>
+            <span className="mr-1.5 inline sm:hidden">Visit</span>
+            <span className="">→</span>
+          </span>
+        </span>
+      </a>
+      <button
+        type="button"
+        className="absolute right-3.5 top-1/2 -translate-y-1/2 rounded-lg px-1.5 py-1.5 text-gray-500 hover:bg-yellow-500 hover:text-gray-700"
+        onClick={(e) => {
+          localStorage.setItem(HIDE_STORAGE_KEY, 'true');
+          setIsVisible(false);
+        }}
+      >
+        <X className="h-4 w-4" />
+      </button>
+    </div>
+  );
+}
diff --git a/src/data/roadmaps/backend/content/mysql@VPxOdjJtKAqmM5V0LR5OC.md b/src/data/roadmaps/backend/content/mysql@VPxOdjJtKAqmM5V0LR5OC.md
index c8204d097..fcf473271 100644
--- a/src/data/roadmaps/backend/content/mysql@VPxOdjJtKAqmM5V0LR5OC.md
+++ b/src/data/roadmaps/backend/content/mysql@VPxOdjJtKAqmM5V0LR5OC.md
@@ -8,5 +8,5 @@ Visit the following resources to learn more:
 - [@article@W3Schools - MySQL Tutorial](https://www.w3schools.com/mySQl/default.asp)
 - [@article@MySQL for Developers](https://planetscale.com/courses/mysql-for-developers/introduction/course-introduction)
 - [@article@MySQL Tutorial](https://www.mysqltutorial.org/)
-- [@video@MySQL Full Course for free](https://www.youtube.com/watch?v=5OdVJbNCSso)
+- [@video@MySQL Complete Course](https://www.youtube.com/watch?v=5OdVJbNCSso)
 - [@feed@Explore top posts about MySQL](https://app.daily.dev/tags/mysql?ref=roadmapsh)