From 2f4af7f3d90ae3c04874beb162053e32b34bbc85 Mon Sep 17 00:00:00 2001
From: daniel31x13 <daniel31x13@gmail.com>
Date: Tue, 7 Nov 2023 13:06:42 -0500
Subject: [PATCH] added announcement bar

---
 components/AnnouncementBar.tsx | 28 +++++++++++++++++++++++
 layouts/MainLayout.tsx         | 41 +++++++++++++++++++++++++++++++---
 lib/client/getLatestVersion.ts | 16 +++++++++++++
 styles/globals.css             | 26 +++++++++++++++++++++
 4 files changed, 108 insertions(+), 3 deletions(-)
 create mode 100644 components/AnnouncementBar.tsx
 create mode 100644 lib/client/getLatestVersion.ts

diff --git a/components/AnnouncementBar.tsx b/components/AnnouncementBar.tsx
new file mode 100644
index 0000000..57f60ad
--- /dev/null
+++ b/components/AnnouncementBar.tsx
@@ -0,0 +1,28 @@
+import { faClose } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import Link from "next/link";
+import React, { MouseEventHandler } from "react";
+
+type Props = {
+  toggleAnnouncementBar: MouseEventHandler<HTMLButtonElement>;
+};
+
+export default function AnnouncementBar({ toggleAnnouncementBar }: Props) {
+  return (
+    <div className="fixed w-full z-20 dark:bg-neutral-900 bg-white">
+      <div className="w-full h-10 rainbow flex items-center justify-center">
+        <div className="w-fit font-semibold">
+          🎉️{" "}
+          <Link href="" target="_blank" className="underline">
+            Linkwarden v2.0
+          </Link>{" "}
+          is now out! 🥳️
+        </div>
+
+        <button className="fixed top-3 right-3" onClick={toggleAnnouncementBar}>
+          <FontAwesomeIcon icon={faClose} className="w-4 h-4" />
+        </button>
+      </div>
+    </div>
+  );
+}
diff --git a/layouts/MainLayout.tsx b/layouts/MainLayout.tsx
index f3f17cb..6b8ab83 100644
--- a/layouts/MainLayout.tsx
+++ b/layouts/MainLayout.tsx
@@ -1,8 +1,10 @@
 import Navbar from "@/components/Navbar";
+import AnnouncementBar from "@/components/AnnouncementBar";
 import Sidebar from "@/components/Sidebar";
-import { ReactNode, useEffect } from "react";
+import { ReactNode, useEffect, useState } from "react";
 import ModalManagement from "@/components/ModalManagement";
 import useModalStore from "@/store/modals";
+import getLatestVersion from "@/lib/client/getLatestVersion";
 
 interface Props {
   children: ReactNode;
@@ -17,16 +19,49 @@ export default function MainLayout({ children }: Props) {
       : (document.body.style.overflow = "auto");
   }, [modal]);
 
+  const showAnnouncementBar = localStorage.getItem("showAnnouncementBar");
+  const [showAnnouncement, setShowAnnouncement] = useState(
+    showAnnouncementBar ? showAnnouncementBar === "true" : true
+  );
+
+  useEffect(() => {
+    getLatestVersion(setShowAnnouncement);
+  }, []);
+
+  useEffect(() => {
+    if (showAnnouncement) {
+      localStorage.setItem("showAnnouncementBar", "true");
+      setShowAnnouncement(true);
+    } else if (!showAnnouncement) {
+      localStorage.setItem("showAnnouncementBar", "false");
+      setShowAnnouncement(false);
+    }
+  }, [showAnnouncement]);
+
+  const toggleAnnouncementBar = () => {
+    setShowAnnouncement(!showAnnouncement);
+  };
+
   return (
     <>
       <ModalManagement />
 
+      {showAnnouncement ? (
+        <AnnouncementBar toggleAnnouncementBar={toggleAnnouncementBar} />
+      ) : undefined}
+
       <div className="flex">
         <div className="hidden lg:block">
-          <Sidebar className="fixed top-0" />
+          <Sidebar
+            className={`fixed ${showAnnouncement ? "top-10" : "top-0"}`}
+          />
         </div>
 
-        <div className="w-full flex flex-col min-h-screen lg:ml-64 xl:ml-80">
+        <div
+          className={`w-full flex flex-col min-h-screen lg:ml-64 xl:ml-80 ${
+            showAnnouncement ? "mt-10" : ""
+          }`}
+        >
           <Navbar />
           {children}
         </div>
diff --git a/lib/client/getLatestVersion.ts b/lib/client/getLatestVersion.ts
new file mode 100644
index 0000000..414b53b
--- /dev/null
+++ b/lib/client/getLatestVersion.ts
@@ -0,0 +1,16 @@
+export default async function getLatestVersion(setShowAnnouncement: Function) {
+  const announcementId = localStorage.getItem("announcementId");
+
+  const response = await fetch(
+    `https://blog.linkwarden.app/latest-announcement.json`
+  );
+
+  const data = await response.json();
+
+  const latestAnnouncement = data.id;
+
+  if (announcementId !== latestAnnouncement) {
+    setShowAnnouncement(true);
+    localStorage.setItem("announcementId", latestAnnouncement);
+  }
+}
diff --git a/styles/globals.css b/styles/globals.css
index a2c51d2..82b1178 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -253,3 +253,29 @@ body {
   background-color: rgb(230, 230, 230);
   border-radius: 8px;
 }
+
+.rainbow {
+  background: linear-gradient(
+    45deg,
+    #ff00004b,
+    #ff99004b,
+    #33cc334b,
+    #0099cc4b,
+    #9900cc4b,
+    #ff33cc4b
+  );
+  background-size: 400% 400%;
+  animation: rainbow 30s linear infinite;
+}
+
+@keyframes rainbow {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}