diff --git a/src/components/CippComponents/CippSponsor.jsx b/src/components/CippComponents/CippSponsor.jsx index 6db3086f6e75..ae4021917def 100644 --- a/src/components/CippComponents/CippSponsor.jsx +++ b/src/components/CippComponents/CippSponsor.jsx @@ -1,4 +1,5 @@ -import { useMemo } from "react"; +import { useMemo, useState, useEffect } from "react"; +import { usePathname } from "next/navigation"; import { Box, Divider, Tooltip, Typography } from "@mui/material"; import { useSettings } from "../../hooks/use-settings"; import sponsorsData from "../../data/sponsors.json"; @@ -38,12 +39,17 @@ const selectRandomSponsor = (sponsors) => { }; const activeSponsors = getActiveSponsors(); -const selectedSponsor = selectRandomSponsor(activeSponsors); export const CippSponsor = () => { + const pathname = usePathname(); + const [selectedSponsor, setSelectedSponsor] = useState(() => selectRandomSponsor(activeSponsors)); const currentSettings = useSettings(); const theme = currentSettings?.currentTheme?.value; + useEffect(() => { + setSelectedSponsor(selectRandomSponsor(activeSponsors)); + }, [pathname]); + // Get the appropriate image based on current theme const randomimg = useMemo(() => { if (!selectedSponsor) return null; @@ -53,7 +59,7 @@ export const CippSponsor = () => { altText: selectedSponsor.altText, tooltip: selectedSponsor.tooltip, }; - }, [theme]); + }, [selectedSponsor, theme]); // Don't render if no sponsors are available if (!randomimg) {