{title}

import React, { ReactNode, useCallback, useEffect, useState, } from 'react'; import Head from 'next/head'; import Image from 'next/image'; import { useGrowiTheme } from '~/stores/context'; import { Themes, useNextThemes } from '~/stores/use-next-themes'; import { getBackgroundImageSrc } from '../Theme/utils/ThemeImageProvider'; import { ThemeProvider } from '../Theme/utils/ThemeProvider'; type Props = { title?: string, className?: string, children?: ReactNode, } export const RawLayout = ({ children, title, className }: Props): JSX.Element => { const classNames: string[] = ['wrapper']; if (className != null) { classNames.push(className); } const { data: growiTheme } = useGrowiTheme(); // get color scheme from next-themes const { resolvedTheme } = useNextThemes(); const [colorScheme, setColorScheme] = useState(undefined); const [backgroundImageSrc, setBackgroundImageSrc] = useState(undefined); // set colorScheme in CSR useEffect(() => { setColorScheme(resolvedTheme as Themes); }, [resolvedTheme]); // set background image useEffect(() => { const imgSrc = getBackgroundImageSrc(growiTheme, colorScheme); setBackgroundImageSrc(imgSrc); }, [growiTheme, colorScheme]); return ( <> {title}

{backgroundImageSrc != null &&

} {children}

); };