2023-04-14 13:35:27 +02:00
|
|
|
import "#/styles/globals.css";
|
|
|
|
|
// include styles from the ui package
|
|
|
|
|
import "@zitadel/react/styles.css";
|
|
|
|
|
import { AddressBar } from "#/ui/AddressBar";
|
|
|
|
|
import { GlobalNav } from "#/ui/GlobalNav";
|
|
|
|
|
import { ZitadelLogo } from "#/ui/ZitadelLogo";
|
|
|
|
|
import { Lato } from "@next/font/google";
|
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-14 17:22:59 +02:00
|
|
|
const darkModeClasses = (d: boolean) =>
|
|
|
|
|
d ? "dark [color-scheme:dark] ui-dark" : "";
|
|
|
|
|
|
2023-04-03 13:39:51 +02:00
|
|
|
export default function RootLayout({
|
|
|
|
|
children,
|
|
|
|
|
}: {
|
|
|
|
|
children: React.ReactNode;
|
|
|
|
|
}) {
|
|
|
|
|
return (
|
2023-04-14 17:22:59 +02:00
|
|
|
<html lang="en" className={`${darkModeClasses(false)} ${lato.className}`}>
|
2023-04-03 13:39:51 +02:00
|
|
|
<head />
|
2023-04-14 17:22:59 +02:00
|
|
|
<body className="overflow-y-scroll bg-background-light-600 dark:bg-background-dark-600 bg-[url('/grid.svg')]">
|
2023-04-03 13:39:51 +02:00
|
|
|
<GlobalNav />
|
|
|
|
|
|
|
|
|
|
<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">
|
2023-04-14 17:22:59 +02:00
|
|
|
<div className="rounded-lg bg-vc-border-gradient dark:dark-bg-vc-border-gradient p-px shadow-lg shadow-black/5 dark:shadow-black/20">
|
|
|
|
|
<div className="rounded-lg bg-background-light-500 dark:bg-background-dark-600">
|
2023-04-03 13:39:51 +02:00
|
|
|
<AddressBar />
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
2023-04-14 17:22:59 +02:00
|
|
|
<div className="rounded-lg bg-vc-border-gradient dark:dark-bg-vc-border-gradient p-px shadow-lg shadow-black/5 dark:shadow-black/20">
|
|
|
|
|
<div className="rounded-lg bg-background-light-500 dark:bg-background-dark-500 p-3.5 lg:p-8">
|
2023-04-03 13:39:51 +02:00
|
|
|
{children}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
2023-04-14 17:22:59 +02:00
|
|
|
<div className="rounded-lg bg-vc-border-gradient dark:dark-bg-vc-border-gradient p-px shadow-lg shadow-black/5 dark:shadow-black/20">
|
|
|
|
|
<div className="rounded-lg bg-background-light-500 dark:bg-background-dark-600">
|
2023-04-03 13:39:51 +02:00
|
|
|
<Byline />
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function Byline() {
|
|
|
|
|
return (
|
2023-04-14 17:22:59 +02:00
|
|
|
<div className="flex items-center p-3.5 lg:px-5 lg:py-3">
|
2023-04-03 13:39:51 +02:00
|
|
|
<div className="flex items-center space-x-1.5">
|
|
|
|
|
<div className="text-sm text-gray-600">By</div>
|
2023-04-14 17:22:59 +02:00
|
|
|
{/* <a href="https://zitadel.com" title="ZITADEL">
|
|
|
|
|
<div className=" text-gray-300 hover:text-gray-50">
|
2023-04-03 13:39:51 +02:00
|
|
|
<ZitadelLogo />
|
|
|
|
|
</div>
|
2023-04-14 17:22:59 +02:00
|
|
|
</a> */}
|
2023-04-03 13:39:51 +02:00
|
|
|
<div className="text-sm font-semibold">ZITADEL</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
}
|
