export UnderConstruction from mdx instead of its own file

Author: andrew-s28

mdx/projects/lagrangian-particle-tracking.mdx

@@ -6,6 +6,6 @@ tags: ["research"]
 description: "My research on Lagrangian particle tracking in the Northern California Current System."
 ---
 
-// import { UnderConstruction } from "~/components/UnderConstruction.tsx";
+import { UnderConstruction } from "~/components/mdx.tsx";
 
 <UnderConstruction />

mdx/projects/pollen-data.mdx

@@ -9,5 +9,6 @@ description: "A historical time series of pollen data from the Willamette Valley
 // import { TimeSeriesPlot } from "@/components/ui/Plots";
 
 // import { UnderConstruction } from "~/components/UnderConstruction.tsx";
+import { UnderConstruction } from "~/components/mdx.tsx";
 
 <UnderConstruction />

mdx/projects/shelf-nitrate-response-to-upwelling.mdx

@@ -7,5 +7,6 @@ description: "My research on the response of shelf nitrate to upwelling in the N
 ---
 
 // import { UnderConstruction } from "~/components/UnderConstruction.tsx";
+import { UnderConstruction } from "~/components/mdx.tsx";
 
 <UnderConstruction />

src/components/mdx.tsx

@@ -7,7 +7,6 @@ import { Link, useMatch } from "@tanstack/react-router";
 import { ReactNode, useState, useRef, useMemo } from "react";
 import { Copy, Check, ExternalLink } from "lucide-react";
 import { getMDXComponent } from "mdx-bundler/client";
-import UnderConstruction from "./UnderConstruction";
 
 function Paragraph({ children }: { children: ReactNode }) {
   return (
@@ -207,6 +206,27 @@ function Image({ src, alt }: { src: string; alt: string }) {
   );
 }
 
+export function UnderConstruction({ description }: { description?: string }) {
+  return (
+    <div className="min-h-screen flex flex-col items-center justify-start p-16 text-center font-sans">
+      <div>
+        <h1 className="text-4xl mt-8">🚧 Under Construction 🚧</h1>
+
+        {description && (
+          <p className="text-xl text-gray-600 max-w-xl">{description}</p>
+        )}
+
+        <p className="mt-8 max-w-md">
+          I recently{" "}
+          <FancyLink href="/about-site">rewrote this website</FancyLink> and
+          I&apos;m working on writing up a whole bunch of content. Check back
+          soon!
+        </p>
+      </div>
+    </div>
+  );
+}
+
 export function MDX({ code }: { code: string }) {
   const Component = useMemo(() => getMDXComponent(code), [code]);
   return (
@@ -223,9 +243,6 @@ export function MDX({ code }: { code: string }) {
         p: Paragraph,
         Image,
         blockquote: BlockQuote,
-        UnderConstruction() {
-          return <UnderConstruction />;
-        },
       }}
     />
   );