Initial commit: Plane

Synced from upstream: 8853637e981ed7d8a6cff32bd98e7afe20f54362

apps/web/app/error/prod.tsx

@@ -0,0 +1,89 @@
+"use client";
+
+import { useTheme } from "next-themes";
+// plane imports
+import { Button } from "@plane/propel/button";
+// assets
+import maintenanceModeDarkModeImage from "@/app/assets/instance/maintenance-mode-dark.svg?url";
+import maintenanceModeLightModeImage from "@/app/assets/instance/maintenance-mode-light.svg?url";
+// layouts
+import DefaultLayout from "@/layouts/default-layout";
+
+const linkMap = [
+  {
+    key: "mail_to",
+    label: "Contact Support",
+    value: "mailto:support@plane.so",
+  },
+  {
+    key: "status",
+    label: "Status Page",
+    value: "https://status.plane.so/",
+  },
+  {
+    key: "twitter_handle",
+    label: "@planepowers",
+    value: "https://x.com/planepowers",
+  },
+];
+
+// Production Error Component
+interface ProdErrorComponentProps {
+  onGoHome: () => void;
+}
+
+export const ProdErrorComponent: React.FC<ProdErrorComponentProps> = ({ onGoHome }) => {
+  // hooks
+  const { resolvedTheme } = useTheme();
+
+  // derived values
+  const maintenanceModeImage = resolvedTheme === "dark" ? maintenanceModeDarkModeImage : maintenanceModeLightModeImage;
+
+  return (
+    <DefaultLayout>
+      <div className="relative container mx-auto h-full w-full max-w-xl flex flex-col gap-2 items-center justify-center gap-y-6 bg-custom-background-100 text-center px-6">
+        <div className="relative w-full">
+          <img
+            src={maintenanceModeImage}
+            height="176"
+            width="288"
+            alt="ProjectSettingImg"
+            className="w-full h-full object-fill object-center"
+          />
+        </div>
+        <div className="w-full relative flex flex-col gap-4 mt-4">
+          <div className="flex flex-col gap-2.5">
+            <h1 className="text-xl font-semibold text-custom-text-100 text-left">
+              &#x1F6A7; Looks like something went wrong!
+            </h1>
+            <span className="text-base font-medium text-custom-text-200 text-left">
+              We track these errors automatically and working on getting things back up and running. If the problem
+              persists feel free to contact us. In the meantime, try refreshing.
+            </span>
+          </div>
+
+          <div className="flex items-center justify-start gap-6 mt-1">
+            {linkMap.map((link) => (
+              <div key={link.key}>
+                <a
+                  href={link.value}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-custom-primary-100 hover:underline text-sm"
+                >
+                  {link.label}
+                </a>
+              </div>
+            ))}
+          </div>
+
+          <div className="flex items-center justify-start gap-6">
+            <Button variant="primary" size="md" onClick={onGoHome}>
+              Go to home
+            </Button>
+          </div>
+        </div>
+      </div>
+    </DefaultLayout>
+  );
+};