wiki
/
weseek__growi
зеркало из https://github.com/weseek/growi


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354
							import type { ReactNode } from 'react';
import React, { useState } from 'react';

import type { ColorScheme } from '@growi/core';
import Head from 'next/head';
import { ToastContainer } from 'react-toastify';
import { useIsomorphicLayoutEffect } from 'usehooks-ts';

import { useNextThemes, NextThemesProvider } from '~/stores/use-next-themes';
import loggerFactory from '~/utils/logger';


import styles from './RawLayout.module.scss';

const toastContainerClass = styles['grw-toast-container'] ?? '';

const logger = loggerFactory('growi:cli:RawLayout');


type Props = {
  className?: string,
  children?: ReactNode,
}

export const RawLayout = ({ children, className }: Props): JSX.Element => {
  const classNames: string[] = ['layout-root', 'growi'];
  if (className != null) {
    classNames.push(className);
  }
  // get color scheme from next-themes
  const { resolvedTheme, resolvedThemeByAttributes } = useNextThemes();

  const [colorScheme, setColorScheme] = useState<ColorScheme|undefined>(undefined);

  // set colorScheme in CSR
  useIsomorphicLayoutEffect(() => {
    setColorScheme(resolvedTheme ?? resolvedThemeByAttributes);
  }, [resolvedTheme, resolvedThemeByAttributes]);

  return (
    <>
      <Head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="initial-scale=1.0, width=device-width" />
      </Head>
      <NextThemesProvider>
        <div className={classNames.join(' ')}>
          {children}
          <ToastContainer className={toastContainerClass} theme={colorScheme} />
        </div>
      </NextThemesProvider>
    </>
  );
};