import { ResolvingViewport } from 'next';
import { cookies } from 'next/headers';
import { PropsWithChildren } from 'react';
import { isRtlLang } from 'rtl-detect';
import Analytics from '@/components/Analytics';
import { getServerConfig } from '@/config/server';
import { DEFAULT_LANG, LOBE_LOCALE_COOKIE } from '@/const/locale';
import {
LOBE_THEME_APPEARANCE,
LOBE_THEME_NEUTRAL_COLOR,
LOBE_THEME_PRIMARY_COLOR,
} from '@/const/theme';
import Layout from '@/layout/GlobalLayout';
import { isMobileDevice } from '@/utils/responsive';
import StyleRegistry from './StyleRegistry';
const { ENABLE_OAUTH_SSO } = getServerConfig();
const RootLayout = ({ children }: PropsWithChildren) => {
// get default theme config to use with ssr
const cookieStore = cookies();
const appearance = cookieStore.get(LOBE_THEME_APPEARANCE);
const neutralColor = cookieStore.get(LOBE_THEME_NEUTRAL_COLOR);
const primaryColor = cookieStore.get(LOBE_THEME_PRIMARY_COLOR);
const lang = cookieStore.get(LOBE_LOCALE_COOKIE);
const direction = isRtlLang(lang?.value || DEFAULT_LANG) ? 'rtl' : 'ltr';
return (
{children}
);
};
export default RootLayout;
export { default as metadata } from './metadata';
export const generateViewport = async (): ResolvingViewport => {
const isMobile = isMobileDevice();
const dynamicScale = isMobile ? { maximumScale: 1, userScalable: false } : {};
return {
...dynamicScale,
initialScale: 1,
minimumScale: 1,
themeColor: [
{ color: '#f8f8f8', media: '(prefers-color-scheme: light)' },
{ color: '#000', media: '(prefers-color-scheme: dark)' },
],
viewportFit: 'cover',
width: 'device-width',
};
};