Added ad banner

apps/nextjs/src/app/page.tsx

@@ -1,18 +1,22 @@
-import { Navbar } from "@/components/Navbar";
 import { AnnouncementBar } from "@/components/announcement-bar";
-import { App } from "./App";
+import { Navbar } from "@/components/Navbar";
 import { getGithubStarsForRepo } from "@/lib/utils";
+import { get } from "@vercel/edge-config";
+
+import { App } from "./App";
 
 export const dynamic = "force-dynamic";
 
 export default async function Home() {
   const githubStars = await getGithubStarsForRepo(
-    "bring-shrubbery/SVG-to-SwiftUI"
+    "bring-shrubbery/SVG-to-SwiftUI",
   );
 
+  const adsEnabled = await get<boolean>("svg-to-swiftui_ads_enabled");
+
   return (
     <>
-      <AnnouncementBar />
+      <AnnouncementBar adsEnabled={!!adsEnabled} />
       <Navbar githubStars={githubStars} />
       <main className="block text-black dark:text-white">
         <App exampleList={[]} />

apps/nextjs/src/components/announcement-bar.tsx

@@ -1,53 +1,75 @@
 "use client";
 
 import Link from "next/link";
-import { XIcon } from "lucide-react";
 import { atom, useAtom } from "jotai";
+import { XIcon } from "lucide-react";
+
 import { analyticsAtom } from "./analytics";
 
 export const announcementBarAtom = atom(false);
 
-export const AnnouncementBar = () => {
+export const AnnouncementBar = ({ adsEnabled }: { adsEnabled: boolean }) => {
   const [announcementBarHidden, setAnnouncementBarHidden] =
     useAtom(announcementBarAtom);
   const [analytics] = useAtom(analyticsAtom);
 
   return (
     <div
       className={
-        "relative w-full py-3 bg-zinc-100 text-black dark:bg-zinc-800 dark:text-white"
+        "relative w-full bg-zinc-100 py-3 text-black dark:bg-zinc-800 dark:text-white"
       }
       style={{
         display: announcementBarHidden ? "none" : "block",
       }}
     >
-      <p className="px-8 mx-auto w-fit text-sm text-center">
-        🥳 Welcome to the redesigned SVG to SwiftUI converter! Functionality is
-        limited for now, feel free to contribute on{" "}
-        <Link
-          href="https://github.com/bring-shrubbery/SVG-to-SwiftUI"
-          className="text-blue-500 dark:text-blue-300 hover:text-blue-600 dark:hover:text-blue-400 active:text-blue-700 dark:active:text-blue-200 visited:text-purple-700 dark:visited:text-purple-300 font-normal"
-        >
-          Github
-        </Link>{" "}
-        or{" "}
-        <Link
-          href="https://github.com/sponsors/bring-shrubbery"
-          className="text-blue-500 dark:text-blue-300 hover:text-blue-600 dark:hover:text-blue-400 active:text-blue-700 dark:active:text-blue-200 visited:text-purple-700 dark:visited:text-purple-300 font-normal"
-        >
-          support me financially
-        </Link>{" "}
-        🚀
-      </p>
+      {adsEnabled ? <Banner2 /> : <Banner1 />}
       <span
-        className="absolute px-2 right-0 top-0 h-full flex items-center"
+        className="absolute right-0 top-0 flex h-full items-center px-2"
         onClick={() => {
           analytics.track("announcement_bar_close");
           setAnnouncementBarHidden(true);
         }}
       >
-        <XIcon className="w-6 h-6 p-1 hover:bg-zinc-50 dark:hover:bg-zinc-600 rounded-full cursor-pointer" />
+        <XIcon className="h-6 w-6 cursor-pointer rounded-full p-1 hover:bg-zinc-50 dark:hover:bg-zinc-600" />
       </span>
     </div>
   );
 };
+
+const Banner1 = () => {
+  return (
+    <p className="mx-auto w-fit px-8 text-center text-sm">
+      🥳 Welcome to the redesigned SVG to SwiftUI converter! Functionality is
+      limited for now, feel free to contribute on{" "}
+      <Link
+        href="https://github.com/bring-shrubbery/SVG-to-SwiftUI"
+        className="font-normal text-blue-500 visited:text-purple-700 hover:text-blue-600 active:text-blue-700 dark:text-blue-300 dark:visited:text-purple-300 dark:hover:text-blue-400 dark:active:text-blue-200"
+      >
+        Github
+      </Link>{" "}
+      or{" "}
+      <Link
+        href="https://github.com/sponsors/bring-shrubbery"
+        className="font-normal text-blue-500 visited:text-purple-700 hover:text-blue-600 active:text-blue-700 dark:text-blue-300 dark:visited:text-purple-300 dark:hover:text-blue-400 dark:active:text-blue-200"
+      >
+        support me financially
+      </Link>{" "}
+      🚀
+    </p>
+  );
+};
+
+const Banner2 = () => {
+  return (
+    <p className="mx-auto w-fit px-8 text-center text-sm">
+      Looking for a gift for a classy friend? 🎁 Check out our 3D printing
+      store:{" "}
+      <Link
+        href="http://quassum.design/"
+        className="font-normal text-blue-500 visited:text-purple-700 hover:text-blue-600 active:text-blue-700 dark:text-blue-300 dark:visited:text-purple-300 dark:hover:text-blue-400 dark:active:text-blue-200"
+      >
+        quassum.design
+      </Link>
+    </p>
+  );
+};