zudoku 0.6.1-dev.2 → 0.6.1-dev.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zudoku",
-  "version": "0.6.1-dev.2",
+  "version": "0.6.1-dev.3",
   "type": "module",
   "files": [
     "dist",

package/src/app/main.css

@@ -80,7 +80,7 @@
   :root {
     --top-header-height: 65px;
     --top-nav-height: 50px;
-    --banner-height: 48px;
+    --banner-height: 40px;
     --header-height: calc(
       var(--top-header-height) + var(--top-nav-height) + var(--banner-height)
     );

package/src/lib/components/Banner.tsx

@@ -0,0 +1,41 @@
+import { CircleXIcon } from "lucide-react";
+import { useState } from "react";
+import { cn } from "../util/cn.js";
+import { useZudoku } from "./context/ZudokuContext.js";
+
+const COLOR_MAP = {
+  info: "bg-blue-500",
+  note: "bg-gray-500",
+  tip: "bg-green-600",
+  caution: "bg-orange-500",
+  danger: "bg-rose-500",
+};
+
+export const Banner = () => {
+  const { page } = useZudoku();
+  const [isBannerOpen, setIsBannerOpen] = useState(true);
+
+  if (!page?.banner || !isBannerOpen) {
+    return <style>{`:root { --banner-height: 0px; }`}</style>;
+  }
+
+  return (
+    <div
+      className={cn(
+        "relative text-primary-foreground text-sm font-medium px-4 py-2 flex gap-2 items-center",
+        page.banner.color ? COLOR_MAP[page.banner.color] : "bg-primary",
+      )}
+    >
+      <div className="w-full">{page.banner.message}</div>
+      {page.banner.dismissible && (
+        <button
+          type="button"
+          className="md:absolute md:right-4 -m-1.5 p-1.5 hover:bg-accent-foreground/10 rounded-md"
+          onClick={() => setIsBannerOpen(false)}
+        >
+          <CircleXIcon size={16} />
+        </button>
+      )}
+    </div>
+  );
+};

package/src/lib/components/Header.tsx

@@ -17,6 +17,7 @@ import {
   DropdownMenuTrigger,
 } from "../ui/DropdownMenu.js";
 import { cn } from "../util/cn.js";
+import { Banner } from "./Banner.js";
 import { useTheme } from "./context/ThemeContext.js";
 import { useZudoku } from "./context/ZudokuContext.js";
 import { MobileTopNavigation } from "./MobileTopNavigation.js";
@@ -60,15 +61,7 @@ export const Header = memo(function HeaderInner() {
 
   return (
     <header className="sticky lg:top-0 z-10 bg-background/80 backdrop-blur w-full">
-      <>
-        {page?.banner ? (
-          <div className="h-[--banner-height] bg-primary/90 text-primary-foreground text-center text-sm font-medium py-2 flex items-center justify-center">
-            <div>{page.banner.message}</div>
-          </div>
-        ) : (
-          <style>{`:root{ --banner-height: 0px }`}</style>
-        )}
-      </>
+      <Banner />
       <div className="max-w-screen-2xl mx-auto">
         <div className="grid grid-cols-2 lg:grid-cols-[calc(var(--side-nav-width))_1fr] lg:gap-12 items-center border-b px-10 lg:px-12 h-[--top-header-height]">
           <div className="flex">

package/src/lib/core/DevPortalContext.ts

@@ -51,6 +51,8 @@ type Page = Partial<{
   };
   banner?: {
     message: ReactNode;
+    color?: "note" | "tip" | "info" | "caution" | "danger";
+    dismissible?: boolean;
   };
 }>;
 

package/src/lib/demo/DemoAnnouncement.tsx

@@ -1,6 +1,6 @@
 export const DemoAnnouncement = () => {
   return (
-    <>
+    <div className="text-center">
       This demo version of your OpenAPI isn't as fast or flexible as
       self-hosting.{" "}
       <a
@@ -10,7 +10,7 @@ export const DemoAnnouncement = () => {
         Get started here
       </a>{" "}
       to see Zudoku at full tilt.
-    </>
+    </div>
   );
 };