From f748d6ec3fe3c797f3006a47ee6a1de2ad93e7d3 Mon Sep 17 00:00:00 2001 From: RandyJC Date: Tue, 9 Dec 2025 10:29:18 +0100 Subject: [PATCH] adding option for branding --- packages/web/src/app/layout.tsx | 2 ++ .../web/src/components/BrandingHelmet.tsx | 18 +++++++++++++++++ .../components/game/create/ThemeEditor.tsx | 20 ++++++++++++++++++- packages/web/src/stores/theme.tsx | 6 +++++- 4 files changed, 44 insertions(+), 2 deletions(-) create mode 100644 packages/web/src/components/BrandingHelmet.tsx diff --git a/packages/web/src/app/layout.tsx b/packages/web/src/app/layout.tsx index e61d32c..f848ef3 100644 --- a/packages/web/src/app/layout.tsx +++ b/packages/web/src/app/layout.tsx @@ -1,4 +1,5 @@ import Toaster from "@rahoot/web/components/Toaster" +import BrandingHelmet from "@rahoot/web/components/BrandingHelmet" import { SocketProvider } from "@rahoot/web/contexts/socketProvider" import type { Metadata } from "next" import { Montserrat } from "next/font/google" @@ -19,6 +20,7 @@ const RootLayout = ({ children }: PropsWithChildren) => ( +
{children}
 diff --git a/packages/web/src/components/BrandingHelmet.tsx b/packages/web/src/components/BrandingHelmet.tsx new file mode 100644 index 0000000..0237e67 --- /dev/null +++ b/packages/web/src/components/BrandingHelmet.tsx @@ -0,0 +1,18 @@ +"use client" + +import { useThemeStore } from "@rahoot/web/stores/theme" +import { useEffect } from "react" + +const BrandingHelmet = () => { + const { brandName } = useThemeStore() + + useEffect(() => { + if (brandName) { + document.title = brandName + } + }, [brandName]) + + return null +} + +export default BrandingHelmet diff --git a/packages/web/src/components/game/create/ThemeEditor.tsx b/packages/web/src/components/game/create/ThemeEditor.tsx index 3a4c44f..45f9cfc 100644 --- a/packages/web/src/components/game/create/ThemeEditor.tsx +++ b/packages/web/src/components/game/create/ThemeEditor.tsx @@ -20,7 +20,7 @@ type Props = { } const ThemeEditor = ({ onBack }: Props) => { - const { backgroundUrl, setBackground, reset } = useThemeStore() + const { backgroundUrl, brandName, setBackground, setBrandName, reset } = useThemeStore() const [customUrl, setCustomUrl] = useState("") const [items, setItems] = useState([]) const [loading, setLoading] = useState(false) @@ -113,6 +113,24 @@ const ThemeEditor = ({ onBack }: Props) => {
+
+

Branding

+ +
+

Preview

diff --git a/packages/web/src/stores/theme.tsx b/packages/web/src/stores/theme.tsx index d8f32d0..43e0466 100644 --- a/packages/web/src/stores/theme.tsx +++ b/packages/web/src/stores/theme.tsx @@ -3,7 +3,9 @@ import { persist } from "zustand/middleware" type ThemeState = { backgroundUrl: string | null + brandName: string setBackground: (_url: string | null) => void + setBrandName: (_name: string) => void reset: () => void } @@ -11,8 +13,10 @@ export const useThemeStore = create()( persist( (set) => ({ backgroundUrl: null, + brandName: "Rahoot", setBackground: (backgroundUrl) => set({ backgroundUrl }), - reset: () => set({ backgroundUrl: null }), + setBrandName: (brandName) => set({ brandName }), + reset: () => set({ backgroundUrl: null, brandName: "Rahoot" }), }), { name: "theme-preferences" }, ),