scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: make header a parallel route

Browse Source
This commit is contained in:
Christel Westerberg
2024-06-11 16:47:18 +02:00
parent f557c8e465
commit e622be7c86
11 changed files with 110 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
app/[lang]/(live)/@header/[...uri]/@languageSwitcher/error.tsx Normal file
View File

@@ -0,0 +1,14 @@
"use client"
import { useParams } from "next/navigation"
import LanguageSwitcher from "@/components/Current/Header/LanguageSwitcher"
import { baseUrls } from "../../_constants"
import { LangParams } from "@/types/params"
export default function Error() {
const params = useParams<LangParams>()
return <LanguageSwitcher urls={baseUrls} lang={params.lang} />
}

13
app/[lang]/(live)/@header/[...uri]/@languageSwitcher/page.tsx Normal file
View File

@@ -0,0 +1,13 @@
import { serverClient } from "@/lib/trpc/server"
import LanguageSwitcher from "@/components/Current/Header/LanguageSwitcher"
import { LangParams, PageArgs } from "@/types/params"
export default async function LanguageSwitcherRoute({
params,
}: PageArgs<LangParams>) {
const urls = await serverClient().contentstack.config.languageSwitcher()
return <LanguageSwitcher urls={urls} lang={params.lang} />
}

21
app/[lang]/(live)/@header/[...uri]/layout.tsx Normal file
View File

@@ -0,0 +1,21 @@
import { ReactNode } from "react"
import Header from "@/components/Current/Header"
import { LangParams, PageArgs } from "@/types/params"
export default function HeaderLayout({
params,
languageSwitcher,
children,
}: PageArgs<LangParams> & {
languageSwitcher: ReactNode
children: ReactNode
}) {
return (
<>
<Header lang={params.lang} languageSwitcher={languageSwitcher} />
{children}
</>
)
}

3
app/[lang]/(live)/@header/[...uri]/page.tsx Normal file
View File

@@ -0,0 +1,3 @@
export default function EmptyHeaderPage() {
return null
}

10
app/[lang]/(live)/@header/_constants.ts Normal file
View File

@@ -0,0 +1,10 @@
import { LanguageSwitcherData } from "@/types/requests/languageSwitcher"
export const baseUrls: LanguageSwitcherData = {
da: { url: "/da/" },
de: { url: "/de/" },
en: { url: "/en/" },
fi: { url: "/fi/" },
no: { url: "/no/" },
sv: { url: "/sv/" },
}

6
app/[lang]/(live)/@header/error.tsx Normal file
View File

@@ -0,0 +1,6 @@
"use client"
export default function Error() {
// Don't return any header if error
return null
}

15
app/[lang]/(live)/@header/page.tsx Normal file
View File

@@ -0,0 +1,15 @@
import Header from "@/components/Current/Header"
import LanguageSwitcher from "@/components/Current/Header/LanguageSwitcher"
import { baseUrls } from "./_constants"
import { LangParams, PageArgs } from "@/types/params"
export async function LanguageSwitcherRoute({ params }: PageArgs<LangParams>) {
return (
<Header
lang={params.lang}
languageSwitcher={<LanguageSwitcher urls={baseUrls} lang={params.lang} />}
/>
)
}

6
app/[lang]/(live)/@languageSwitcher/[...uri]/error.tsx
View File

@@ -1,6 +0,0 @@
"use client"
export default function Error({ error }: any) {
// Don't return any content if error
return null
}

3
app/[lang]/(live)/@languageSwitcher/default.tsx
View File

@@ -1,3 +0,0 @@
export default async function DefaultLanguageSwitcher() {
return null
}

9
app/[lang]/(live)/layout.tsx
View File

@@ -24,10 +24,10 @@ export const metadata: Metadata = {
export default async function RootLayout({
children,
params,
languageSwitcher,
header,
}: React.PropsWithChildren<
LayoutArgs<LangParams> & {
languageSwitcher: React.ReactNode
header: React.ReactNode
}
>) {
const { defaultLocale, locale, messages } = await getIntl()
@@ -55,10 +55,7 @@ export default async function RootLayout({
<body>
<ServerIntlProvider intl={{ defaultLocale, locale, messages }}>
<TrpcProvider lang={params.lang}>
<Header
lang={params.lang}
languageSwitcher={languageSwitcher}
/>
{header}
{children}
<Footer lang={params.lang} />
</TrpcProvider>

25
components/Current/Header/LanguageSwitcher/index.tsx Normal file
View File

@@ -0,0 +1,25 @@
import Desktop from "./Desktop"
import Mobile from "./Mobile"
import styles from "./languageSwitcher.module.css"
import { LangParams } from "@/types/params"
import { LanguageSwitcherData } from "@/types/requests/languageSwitcher"
type LanguageSwitcherProps = LangParams & { urls: LanguageSwitcherData }
export default function LanguageSwitcher({
urls,
lang,
}: LanguageSwitcherProps) {
return (
<>
<section className={styles.desktop}>
<Desktop currentLanguage={lang} urls={urls} />
</section>
<section className={styles.mobile}>
<Mobile currentLanguage={lang} urls={urls} />
</section>
</>
)
}