diff --git a/service/frontend/public/assets/imagi-date.png b/service/frontend/public/assets/imagi-date.png new file mode 100644 index 0000000..cf3bfe4 Binary files /dev/null and b/service/frontend/public/assets/imagi-date.png differ diff --git a/service/frontend/public/assets/onlyflags.png b/service/frontend/public/assets/onlyflags.png new file mode 100644 index 0000000..694b06d Binary files /dev/null and b/service/frontend/public/assets/onlyflags.png differ diff --git a/service/frontend/public/assets/onlyflags2.png b/service/frontend/public/assets/onlyflags2.png new file mode 100644 index 0000000..4b44ec4 Binary files /dev/null and b/service/frontend/public/assets/onlyflags2.png differ diff --git a/service/frontend/public/assets/pirate-say.png b/service/frontend/public/assets/pirate-say.png new file mode 100644 index 0000000..b199de5 Binary files /dev/null and b/service/frontend/public/assets/pirate-say.png differ diff --git a/service/frontend/public/assets/sceam.png b/service/frontend/public/assets/sceam.png new file mode 100644 index 0000000..160a48d Binary files /dev/null and b/service/frontend/public/assets/sceam.png differ diff --git a/service/frontend/public/assets/whatsscam.png b/service/frontend/public/assets/whatsscam.png new file mode 100644 index 0000000..2e27bdf Binary files /dev/null and b/service/frontend/public/assets/whatsscam.png differ diff --git a/service/frontend/src/app/page.tsx b/service/frontend/src/app/page.tsx index 0cd10e1..80dc1e0 100644 --- a/service/frontend/src/app/page.tsx +++ b/service/frontend/src/app/page.tsx @@ -2,6 +2,7 @@ import CreateDevenvButton from "@/components/create-devenv-button"; import CreateReplButton from "@/components/create-repl-button"; +import RandomAdBanner from "@/components/random-ad-banner"; import { Button } from "@/components/ui/button"; import { useUserQuery } from "@/hooks/use-user-query"; import { RocketIcon } from "@radix-ui/react-icons"; @@ -11,24 +12,30 @@ export default function Page() { const isAuthenticatedMode = !userQuery.isStale && userQuery.isSuccess; return ( -
-
Want a clean /home?
-
Use replme!
-
- Hack together your ideas in development environments, use a throwaway - shell - all in one place. +
+
+
Want a clean /home?
+
Use replme!
+
+ Hack together your ideas in development environments, use a throwaway + shell - all in one place. +
+
+ {isAuthenticatedMode ? ( + + ) : ( + + + + )} + +
-
- {isAuthenticatedMode ? ( - - ) : ( - - - - )} - + +
+
); diff --git a/service/frontend/src/components/random-ad-banner.tsx b/service/frontend/src/components/random-ad-banner.tsx new file mode 100644 index 0000000..894b21b --- /dev/null +++ b/service/frontend/src/components/random-ad-banner.tsx @@ -0,0 +1,37 @@ +"use client"; +import Image from "next/image"; +import { useEffect, useState } from "react"; + +const IMAGES = [ + "/assets/imagi-date.png", + "/assets/onlyflags.png", + "/assets/onlyflags2.png", + "/assets/pirate-say.png", + "/assets/sceam.png", + "/assets/whatsscam.png", +]; + +function getRandomArbitrary(min: number, max: number) { + return Math.floor(Math.random() * (max - min + 1)) + min; +} + +const RandomAdBanner = () => { + const [index, setIndex] = useState(); + + useEffect(() => { + setIndex(getRandomArbitrary(0, IMAGES.length - 1)); + }, []); + + if (index === undefined) return <>; + + return ( + ad + ); +}; + +export default RandomAdBanner;