buildx-app/app/layout.tsx at main · theopensystemslab/buildx-app · GitHub

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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
import clsx from "clsx";
import { Metadata } from "next";
import { Inter } from "next/font/google";
import { Fragment, PropsWithChildren } from "react";
import "~/styles/globals.css";
import GlobalClientSideEffects from "./GlobalClientSideEffects";
import Footer from "./ui/Footer";
import Nav from "./ui/Nav";
import Fathom from "./utils/Fathom";
import config from "@/buildx-app.config.json";
import dynamic from "next/dynamic";

const inter = Inter({
  subsets: ["latin"],
});

// Dynamic import with no SSR
const BrowserCompatibilityWrapper = dynamic(
  () => import("./BrowserCompatibilityWrapper"),
  { ssr: false }
);

const TakedownMessage = () => {
  return (
    <div className="takedown-message flex-auto flex items-center justify-center">
      <div className="text-center">
        <h1 className="text-2xl font-bold mb-2">
          Sorry, this page is currently unavailable.
        </h1>
        <p>We are working on it. Please check back soon.</p>
      </div>
    </div>
  );
};

const Layout = async ({ children }: PropsWithChildren<{}>) => {
  const isTakedownEnabled = config.takedown === "true";

  return (
    <Fragment>
      <GlobalClientSideEffects />
      <html lang="en" className={clsx(inter.className, "w-full h-full")}>
        <body className="w-full h-full flex flex-col overflow-hidden">
          <Fathom />
          {isTakedownEnabled ? (
            <TakedownMessage />
          ) : (
            <BrowserCompatibilityWrapper>
              <div className="flex-1 flex-grow-0">
                <Nav />
              </div>
              <div className="flex-auto overflow-y-auto overflow-x-hidden">
                {children}
              </div>
              <div className="flex-1 flex-grow-0">
                <Footer />
              </div>
            </BrowserCompatibilityWrapper>
          )}
        </body>
      </html>
    </Fragment>
  );
};

export const metadata: Metadata = {
  title: "Design your WikiHouse",
  description:
    "Explore the prototype WikiHouse design tool, and share your suggestions or ideas for how we can improve it using the 'feedback' link.",
  metadataBase: new URL("https://build.wikihouse.cc"),
  openGraph: {
    images: [
      {
        url: "/BuildWikiHouse_OpenGraph.png",
        width: 1200,
        height: 630,
        alt: "WikiHouse Design Tool",
      },
    ],
  },
  twitter: {
    card: "summary_large_image",
    images: [
      {
        url: "/BuildWikiHouse_OpenGraph.png",
        width: 1200,
        height: 630,
        alt: "WikiHouse Design Tool",
      },
    ],
  },
};

export default Layout;