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}
); }