diff --git a/src/setup/Layout.tsx b/src/setup/Layout.tsx
index 3c0d404b..3227ecbc 100644
--- a/src/setup/Layout.tsx
+++ b/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 (
+
+
+
= {
@@ -85,6 +87,7 @@ const env: Record
= {
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"),
};
}
diff --git a/src/stores/banner/BannerLocation.tsx b/src/stores/banner/BannerLocation.tsx
index 1fac748a..c9f3a39a 100644
--- a/src/stores/banner/BannerLocation.tsx
+++ b/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(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 (
{!isOnline && !ignoredBannerIds.includes("offline") ? (
@@ -81,6 +96,11 @@ export function BannerLocation(props: { location?: string }) {
{t("navigation.banner.offline")}
) : null}
+ {hasCustomBanner && customMessage ? (
+
+ {customMessage}
+
+ ) : null}
);
}