RawLayout.tsx 1.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041
  1. import React, { ReactNode } from 'react';
  2. import { useTheme } from 'next-themes';
  3. import Head from 'next/head';
  4. import { useGrowiTheme } from '~/stores/context';
  5. import { ThemeProvider } from '../Theme/utils/ThemeProvider';
  6. type Props = {
  7. title: string,
  8. className?: string,
  9. children?: ReactNode,
  10. }
  11. export const RawLayout = ({ children, title, className }: Props): JSX.Element => {
  12. const classNames: string[] = ['wrapper'];
  13. if (className != null) {
  14. classNames.push(className);
  15. }
  16. const { data: growiTheme } = useGrowiTheme();
  17. // get color scheme from next-themes
  18. const { resolvedTheme: colorScheme } = useTheme();
  19. return (
  20. <>
  21. <Head>
  22. <title>{title}</title>
  23. <meta charSet="utf-8" />
  24. <meta name="viewport" content="initial-scale=1.0, width=device-width" />
  25. </Head>
  26. <ThemeProvider theme={growiTheme}>
  27. <div className={classNames.join(' ')} data-color-scheme={colorScheme}>
  28. {children}
  29. </div>
  30. </ThemeProvider>
  31. </>
  32. );
  33. };