/
Layout.tsx
58 lines (53 loc) · 1.61 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
import type { RouteLocale } from 'next-roots'
import type { PropsWithChildren, ReactNode } from 'react'
import { Nav } from './Nav'
import 'src/features/common/styles.css'
import {
getAboutHref,
getBooksHref,
getContactsHref,
getHomeHref,
getProductsHref,
} from 'src/server/router'
import { getDictionary } from 'src/server/utils/getDictionary'
import { Footer } from './Footer'
type RootLayoutProps = PropsWithChildren<{
locale: RouteLocale
modal: ReactNode
}>
async function getNavigation(locale: string) {
const t = await getDictionary(locale)
return [
{ name: t('nav.Home'), href: getHomeHref(locale) },
{ name: t('nav.Products'), href: getProductsHref({ locale }) },
{ name: t('nav.Books'), href: getBooksHref(locale) },
{ name: t('nav.About'), href: getAboutHref(locale) },
{ name: t('nav.Contacts'), href: getContactsHref(locale) },
]
}
/**
* Root layout is meant to be used as top level layout for all routes.
* That means it should be used only in /en/layout.ts, /es/layout.ts, /cs/layout.ts
*
* @param param0
* @returns
*/
export async function Layout({ children, modal, locale }: RootLayoutProps) {
const navigation = await getNavigation(locale)
return (
<html lang={locale} className="h-full bg-gray-100">
<body className="h-full">
<div className="flex min-h-full flex-col">
<Nav items={navigation} />
<main className="mx-auto max-w-7xl py-6 sm:px-6 lg:px-8">
{children}
</main>
<footer className="py-6">
<Footer />
</footer>
{modal}
</div>
</body>
</html>
)
}