Files
zitadel/apps/login/app/layout.tsx

75 lines
2.3 KiB
TypeScript
Raw Normal View History

2023-04-24 15:32:57 +02:00
import "#/styles/globals.scss";
2023-04-14 13:35:27 +02:00
import { AddressBar } from "#/ui/AddressBar";
import { GlobalNav } from "#/ui/GlobalNav";
2023-04-19 10:37:35 +02:00
import { Lato } from "next/font/google";
import { LayoutProviders } from "#/ui/LayoutProviders";
2023-04-20 14:39:51 +02:00
import { Analytics } from "@vercel/analytics/react";
2023-04-21 16:13:52 +02:00
import ThemeWrapper from "#/ui/ThemeWrapper";
2023-05-15 09:23:59 +02:00
import { getBrandingSettings } from "#/lib/zitadel";
2023-04-22 20:16:47 +02:00
import { server } from "../lib/zitadel";
import { BrandingSettings } from "@zitadel/server";
2023-07-28 09:21:07 +02:00
import ThemeProvider from "#/ui/ThemeProvider";
2024-03-08 14:13:11 +01:00
import Theme from "#/ui/Theme";
2023-04-03 13:39:51 +02:00
const lato = Lato({
2023-04-27 13:23:13 +02:00
weight: ["400", "700", "900"],
2023-04-14 13:35:27 +02:00
subsets: ["latin"],
2023-04-03 13:39:51 +02:00
});
export const revalidate = 60; // revalidate every minute
2023-04-22 20:16:47 +02:00
export default async function RootLayout({
2023-04-03 13:39:51 +02:00
children,
}: {
children: React.ReactNode;
}) {
2023-04-27 13:23:13 +02:00
// later only shown with dev mode enabled
const showNav = process.env.DEBUG === "true";
2023-04-27 13:23:13 +02:00
2023-05-22 11:48:18 +02:00
let domain = process.env.ZITADEL_API_URL;
domain = domain ? domain.replace("https://", "") : "acme.com";
2023-04-03 13:39:51 +02:00
return (
<html lang="en" className={`${lato.className}`} suppressHydrationWarning>
2023-04-03 13:39:51 +02:00
<head />
<body>
2024-04-01 10:00:31 +02:00
<div
className={`h-screen overflow-y-scroll bg-background-light-600 dark:bg-background-dark-600 ${
showNav
? "bg-[url('/grid-light.svg')] dark:bg-[url('/grid-dark.svg')]"
: ""
}`}
>
{showNav ? (
<GlobalNav />
) : (
<div className="absolute bottom-0 right-0 flex flex-row p-4">
<Theme />
</div>
)}
2023-04-03 13:39:51 +02:00
2024-04-01 10:00:31 +02:00
<div
className={`${
showNav ? "lg:pl-72" : ""
} pb-4 flex flex-col justify-center h-full`}
>
<div className="mx-auto max-w-[440px] space-y-8 pt-20 lg:py-8 w-full">
{showNav && (
<div className="rounded-lg bg-vc-border-gradient dark:bg-dark-vc-border-gradient p-px shadow-lg shadow-black/5 dark:shadow-black/20">
<div className="rounded-lg bg-background-light-400 dark:bg-background-dark-500">
<AddressBar domain={domain} />
</div>
2023-04-19 10:37:35 +02:00
</div>
2024-04-01 10:00:31 +02:00
)}
{children}
</div>
</div>
</div>
2023-04-20 14:39:51 +02:00
<Analytics />
</body>
2023-04-03 13:39:51 +02:00
</html>
);
}