passkey-login: Add announcement banner

frontend/src/components/AnnouncementBanner.js

@@ -0,0 +1,36 @@
+import { A } from "@solidjs/router";
+import { Icon } from "solid-heroicons";
+import { rocketLaunch } from "solid-heroicons/solid";
+import { Show } from "solid-js";
+
+const AnnouncementBanner = props => {
+  return (
+    <div
+      id="sticky-banner"
+      tabIndex="-1"
+      class="flex w-full justify-between bg-blue-600 p-4 dark:border-gray-600"
+    >
+      <div class="mx-auto flex items-center">
+        <p class="flex items-center text-sm font-normal text-white">
+          <span class="me-3 inline-flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-white p-1">
+            <Icon path={rocketLaunch} class="h-4 w-4 text-blue-600" />
+            <span class="sr-only">Announcement</span>
+          </span>
+          <span>{props.text}</span>
+        </p>
+      </div>
+      <Show when={props.cta}>
+        <div class="flex items-center">
+          <A
+            class="me-2 rounded border border-white px-2.5 py-0.5 text-xs font-medium uppercase text-white"
+            href={props.cta?.href}
+          >
+            {props.cta?.text}
+          </A>
+        </div>
+      </Show>
+    </div>
+  );
+};
+
+export default AnnouncementBanner;

frontend/src/components/App.js

@@ -3,6 +3,7 @@ import { QueryClient, QueryClientProvider } from "@tanstack/solid-query";
 import { lazy } from "solid-js";
 
 import { useStore } from "../store";
+import AnnouncementBanner from "./AnnouncementBanner";
 import Footer from "./Footer";
 import Header from "./Header";
 import HelpButton from "./HelpButton";
@@ -49,6 +50,10 @@ export default function App() {
       <div class={store.theme === "dark" ? "dark" : ""}>
         <div class="flex min-h-screen flex-col bg-white dark:bg-gray-900">
           <Header />
+          <AnnouncementBanner
+            text="New One-Tap Login Launched!"
+            cta={{ text: "more", href: "/help" }}
+          />
           <section class="grow">
             <div class="mx-auto max-w-screen-xl px-4 py-8 lg:px-6 lg:py-16">
               <div class="text-gray-500 dark:text-gray-400 sm:text-lg">