2023-04-24 15:32:57 +02:00
|
|
|
import "#/styles/globals.scss";
|
2023-04-14 13:35:27 +02:00
|
|
|
// include styles from the ui package
|
|
|
|
|
import "@zitadel/react/styles.css";
|
|
|
|
|
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 Byline from "#/ui/Byline";
|
2023-04-19 14:56:01 +02:00
|
|
|
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-04-22 20:16:47 +02:00
|
|
|
import { getBranding } from "#/lib/zitadel";
|
|
|
|
|
import { server } from "../lib/zitadel";
|
2023-04-24 16:30:21 +02:00
|
|
|
import { LabelPolicyColors } from "#/utils/colors";
|
2023-04-03 13:39:51 +02:00
|
|
|
|
|
|
|
|
const lato = Lato({
|
2023-04-14 13:35:27 +02:00
|
|
|
weight: "400",
|
|
|
|
|
subsets: ["latin"],
|
2023-04-03 13:39:51 +02:00
|
|
|
});
|
|
|
|
|
|
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-22 20:16:47 +02:00
|
|
|
const branding = await getBranding(server);
|
2023-04-24 16:30:21 +02:00
|
|
|
let partialPolicy: LabelPolicyColors | undefined;
|
|
|
|
|
if (branding) {
|
|
|
|
|
partialPolicy = {
|
|
|
|
|
backgroundColor: branding?.backgroundColor,
|
|
|
|
|
backgroundColorDark: branding?.backgroundColorDark,
|
|
|
|
|
primaryColor: branding?.primaryColor,
|
|
|
|
|
primaryColorDark: branding?.primaryColorDark,
|
|
|
|
|
warnColor: branding?.warnColor,
|
|
|
|
|
warnColorDark: branding?.warnColorDark,
|
|
|
|
|
fontColor: branding?.fontColor,
|
|
|
|
|
fontColorDark: branding?.fontColorDark,
|
|
|
|
|
};
|
|
|
|
|
}
|
2023-04-03 13:39:51 +02:00
|
|
|
return (
|
2023-04-19 14:56:01 +02:00
|
|
|
<html lang="en" className={`${lato.className}`} suppressHydrationWarning>
|
2023-04-03 13:39:51 +02:00
|
|
|
<head />
|
2023-04-19 14:56:01 +02:00
|
|
|
<body>
|
2023-04-24 16:30:21 +02:00
|
|
|
<ThemeWrapper branding={partialPolicy}>
|
2023-04-21 16:13:52 +02:00
|
|
|
<LayoutProviders>
|
2023-04-24 16:30:21 +02:00
|
|
|
<div className="h-screen overflow-y-scroll bg-background-light-600 dark:bg-background-dark-600 bg-[url('/grid-light.svg')] dark:bg-[url('/grid-dark.svg')]">
|
2023-04-21 16:13:52 +02:00
|
|
|
<GlobalNav />
|
2023-04-03 13:39:51 +02:00
|
|
|
|
2023-04-21 16:13:52 +02:00
|
|
|
<div className="lg:pl-72">
|
|
|
|
|
<div className="mx-auto max-w-xl space-y-8 px-2 pt-20 lg:py-8 lg:px-8">
|
|
|
|
|
<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">
|
2023-04-24 16:30:21 +02:00
|
|
|
<div className="rounded-lg bg-background-light-400 dark:bg-background-dark-500">
|
2023-04-21 16:13:52 +02:00
|
|
|
<AddressBar />
|
|
|
|
|
</div>
|
2023-04-19 14:56:01 +02:00
|
|
|
</div>
|
2023-04-03 13:39:51 +02:00
|
|
|
|
2023-04-21 16:13:52 +02:00
|
|
|
<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">
|
2023-04-24 15:32:57 +02:00
|
|
|
<div className="rounded-lg bg-background-light-400 dark:bg-background-dark-500 p-3.5 lg:p-8">
|
2023-04-21 16:13:52 +02:00
|
|
|
{children}
|
|
|
|
|
</div>
|
2023-04-19 14:56:01 +02:00
|
|
|
</div>
|
2023-04-03 13:39:51 +02:00
|
|
|
|
2023-04-21 16:13:52 +02:00
|
|
|
<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">
|
2023-04-24 16:30:21 +02:00
|
|
|
<div className="rounded-lg bg-background-light-400 dark:bg-background-dark-500">
|
2023-04-21 16:13:52 +02:00
|
|
|
<Byline />
|
|
|
|
|
</div>
|
2023-04-19 14:56:01 +02:00
|
|
|
</div>
|
2023-04-19 10:37:35 +02:00
|
|
|
</div>
|
2023-04-03 13:39:51 +02:00
|
|
|
</div>
|
|
|
|
|
</div>
|
2023-04-21 16:13:52 +02:00
|
|
|
</LayoutProviders>
|
|
|
|
|
</ThemeWrapper>
|
2023-04-20 14:39:51 +02:00
|
|
|
<Analytics />
|
2023-04-19 14:56:01 +02:00
|
|
|
</body>
|
2023-04-03 13:39:51 +02:00
|
|
|
</html>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
2023-04-19 10:37:35 +02:00
|
|
|
// export const metadata = () => {
|
|
|
|
|
// return (
|
|
|
|
|
// <>
|
|
|
|
|
// <DefaultTags />
|
|
|
|
|
// <title>ZITADEL Login Playground</title>
|
|
|
|
|
// <meta
|
|
|
|
|
// name="description"
|
|
|
|
|
// content="This is a ZITADEL Login Playground to get an understanding how the login API works."
|
|
|
|
|
// />
|
|
|
|
|
// </>
|
|
|
|
|
// );
|
|
|
|
|
// };
|
