-
-
Notifications
You must be signed in to change notification settings - Fork 9.4k
/
layout.tsx
66 lines (55 loc) · 1.89 KB
/
layout.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
import { SpeedInsights } from '@vercel/speed-insights/next';
import { ResolvingViewport } from 'next';
import dynamic from 'next/dynamic';
import { cookies } from 'next/headers';
import { ReactNode } from 'react';
import { isRtlLang } from 'rtl-detect';
import Analytics from '@/components/Analytics';
import { DEFAULT_LANG, LOBE_LOCALE_COOKIE } from '@/const/locale';
import AuthProvider from '@/layout/AuthProvider';
import GlobalProvider from '@/layout/GlobalProvider';
import { isMobileDevice } from '@/utils/responsive';
const PWAInstall = dynamic(() => import('@/features/PWAInstall'), { ssr: false });
const inVercel = process.env.VERCEL === '1';
type RootLayoutProps = {
children: ReactNode;
modal: ReactNode;
};
const RootLayout = async ({ children, modal }: RootLayoutProps) => {
const cookieStore = cookies();
const lang = cookieStore.get(LOBE_LOCALE_COOKIE);
const direction = isRtlLang(lang?.value || DEFAULT_LANG) ? 'rtl' : 'ltr';
const mobile = isMobileDevice();
return (
<html dir={direction} lang={lang?.value || DEFAULT_LANG} suppressHydrationWarning>
<body>
<GlobalProvider>
<AuthProvider>
{children}
{!mobile && modal}
</AuthProvider>
<PWAInstall />
</GlobalProvider>
<Analytics />
{inVercel && <SpeedInsights />}
</body>
</html>
);
};
export default RootLayout;
export { generateMetadata } 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',
};
};