randyjc/Rahoot
1
0
Fork 0
mirror of https://github.com/randyjc/Rahoot.git synced 2026-03-13 20:15:35 +01:00
Code Issues Packages Projects Releases Wiki Activity

adding option for branding

Browse Source
This commit is contained in:
RandyJC
2025-12-09 10:29:18 +01:00
parent a572eb35cd
commit f748d6ec3f
4 changed files with 44 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/web/src/app/layout.tsx
View File

@@ -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) => (
<html lang="en" suppressHydrationWarning={true} data-lt-installed="true">
<body className={`${montserrat.variable} bg-secondary antialiased`}>
<SocketProvider>
<BrandingHelmet />
<main className="text-base-[8px] flex flex-col">{children}</main>
<Toaster />
</SocketProvider>

18
packages/web/src/components/BrandingHelmet.tsx Normal file
View File

@@ -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

20
packages/web/src/components/game/create/ThemeEditor.tsx
View File

@@ -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<MediaItem[]>([])
const [loading, setLoading] = useState(false)
@@ -113,6 +113,24 @@ const ThemeEditor = ({ onBack }: Props) => {
</div>
<div className="grid gap-4 lg:grid-cols-2">
<div className="space-y-3 rounded-md border border-gray-200 bg-white p-4 shadow-sm">
<h3 className="text-lg font-semibold text-gray-800">Branding</h3>
<label className="flex flex-col gap-2">
<span className="text-sm font-semibold text-gray-600">
Brand name
</span>
<input
value={brandName}
onChange={(e) => setBrandName(e.target.value)}
className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm"
placeholder="e.g., Kwalitaria Pub Quiz"
/>
<span className="text-xs text-gray-500">
Appears in the browser title bar and elsewhere we surface the brand.
</span>
</label>
</div>
<div className="space-y-3 rounded-md border border-gray-200 bg-white p-4 shadow-sm">
<h3 className="text-lg font-semibold text-gray-800">Preview</h3>
<div className="relative h-60 w-full overflow-hidden rounded-md border border-gray-100 bg-gray-50">

6
packages/web/src/stores/theme.tsx
View File

@@ -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<ThemeState>()(
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" },
),