add info banner with env

src/setup/Layout.tsx

@@ -1,6 +1,7 @@
 import { ReactNode } from "react";
 
 import { useBannerSize, useBannerStore } from "@/stores/banner";
+import { BannerLocation } from "@/stores/banner/BannerLocation";
 
 export function Layout(props: { children: ReactNode }) {
   const bannerSize = useBannerSize();
@@ -8,6 +9,9 @@ export function Layout(props: { children: ReactNode }) {
 
   return (
     <div>
+      <div className="fixed inset-x-0 z-[1000]">
+        <BannerLocation />
+      </div>
       <div
         style={{
           paddingTop: location === null ? `${bannerSize}px` : "0px",

src/setup/config.ts

@@ -30,6 +30,7 @@ interface Config {
   SHOW_AD: boolean;
   AD_CONTENT_URL: string;
   TRACK_SCRIPT: string;
+  BANNER_MESSAGE: string;
 }
 
 export interface RuntimeConfig {
@@ -56,6 +57,7 @@ export interface RuntimeConfig {
   SHOW_AD: boolean;
   AD_CONTENT_URL: string[];
   TRACK_SCRIPT: string | null;
+  BANNER_MESSAGE: string | null;
 }
 
 const env: Record<keyof Config, undefined | string> = {
@@ -85,6 +87,7 @@ const env: Record<keyof Config, undefined | string> = {
   SHOW_AD: import.meta.env.VITE_SHOW_AD,
   AD_CONTENT_URL: import.meta.env.VITE_AD_CONTENT_URL,
   TRACK_SCRIPT: import.meta.env.VITE_TRACK_SCRIPT,
+  BANNER_MESSAGE: import.meta.env.VITE_BANNER_MESSAGE,
 };
 
 function coerceUndefined(value: string | null | undefined): string | undefined {
@@ -157,5 +160,6 @@ export function conf(): RuntimeConfig {
       .map((v) => v.trim())
       .filter((v) => v.length > 0),
     TRACK_SCRIPT: getKey("TRACK_SCRIPT"),
+    BANNER_MESSAGE: getKey("BANNER_MESSAGE"),
   };
 }

src/stores/banner/BannerLocation.tsx

@@ -2,18 +2,19 @@ import { useEffect } from "react";
 import { useTranslation } from "react-i18next";
 
 import { Icon, Icons } from "@/components/Icon";
+import { conf } from "@/setup/config";
 import { useBannerStore, useRegisterBanner } from "@/stores/banner";
 
 export function Banner(props: {
   children: React.ReactNode;
-  type: "error" | "info"; // Add "info" type
+  type: "error" | "info";
   id: string;
 }) {
   const [ref] = useRegisterBanner<HTMLDivElement>(props.id);
   const hideBanner = useBannerStore((s) => s.hideBanner);
   const styles = {
     error: "bg-[#C93957] text-white",
-    info: "bg-[#126FD3] text-white", // Add "info" style
+    info: "bg-[#126FD3] text-white",
   };
   const icons = {
     error: Icons.CIRCLE_EXCLAMATION,
@@ -59,6 +60,8 @@ export function BannerLocation(props: { location?: string }) {
   const setLocation = useBannerStore((s) => s.setLocation);
   const ignoredBannerIds = useBannerStore((s) => s.ignoredBannerIds);
   const currentLocation = useBannerStore((s) => s.location);
+  const banners = useBannerStore((s) => s.banners);
+  const showBanner = useBannerStore((s) => s.showBanner);
   const loc = props.location ?? null;
 
   useEffect(() => {
@@ -69,11 +72,23 @@ export function BannerLocation(props: { location?: string }) {
     };
   }, [setLocation, loc]);
 
+  useEffect(() => {
+    const customMessage = conf().BANNER_MESSAGE;
+    const shouldShow = customMessage && loc === null;
+
+    if (shouldShow) {
+      showBanner("custom-message");
+    }
+  }, [loc, showBanner]);
+
   if (currentLocation !== loc) return null;
 
   const hideBannerFlag = sessionStorage.getItem("hideBanner");
   if (hideBannerFlag) return null;
 
+  const customMessage = conf().BANNER_MESSAGE;
+  const hasCustomBanner = banners.some((b) => b.id === "custom-message");
+
   return (
     <div>
       {!isOnline && !ignoredBannerIds.includes("offline") ? (
@@ -81,6 +96,11 @@ export function BannerLocation(props: { location?: string }) {
           {t("navigation.banner.offline")}
         </Banner>
       ) : null}
+      {hasCustomBanner && customMessage ? (
+        <Banner id="custom-message" type="info">
+          {customMessage}
+        </Banner>
+      ) : null}
     </div>
   );
 }