diff --git a/src/pages/parts/home/HeroPart.tsx b/src/pages/parts/home/HeroPart.tsx index b94b0264..bac37656 100644 --- a/src/pages/parts/home/HeroPart.tsx +++ b/src/pages/parts/home/HeroPart.tsx @@ -3,6 +3,7 @@ import Sticky from "react-sticky-el"; import { useWindowSize } from "react-use"; import { SearchBarInput } from "@/components/form/SearchBar"; +import { Icon, Icons } from "@/components/Icon"; import { ThinContainer } from "@/components/layout/ThinContainer"; import { useSlashFocus } from "@/components/player/hooks/useSlashFocus"; import { HeroTitle } from "@/components/text/HeroTitle"; @@ -33,6 +34,9 @@ export function HeroPart({ setIsSticky, searchParams }: HeroPartProps) { const { t: randomT } = useRandomTranslation(); const [search, setSearch, setSearchUnFocus] = searchParams; const [, setShowBg] = useState(false); + const [isAdDismissed, setIsAdDismissed] = useState(() => { + return localStorage.getItem("adDismissed") === "true"; + }); const bannerSize = useBannerSize(); const stickStateChanged = useCallback( (isFixed: boolean) => { @@ -58,6 +62,11 @@ export function HeroPart({ setIsSticky, searchParams }: HeroPartProps) { ? -40 // landscape : 0; // portrait + const dismissAd = useCallback(() => { + setIsAdDismissed(true); + localStorage.setItem("adDismissed", "true"); + }, []); + useEffect(() => { if (windowWidth > 1280) { // On large screens the bar goes inline with the nav elements @@ -102,12 +111,25 @@ export function HeroPart({ setIsSticky, searchParams }: HeroPartProps) { {/* Optional ad */} - {conf().SHOW_AD ? ( -