import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { MDXProvider } from "@mdx-js/react";
import { RunnerProvider } from "@plate-lab/components";
import "@plate-lab/components/styles.css";
import "./styles.css";
import CflTutorial from "./tutorials/cfl.mdx";

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <RunnerProvider>
      <MDXProvider>
        <div className="doc">
          <nav className="doc-nav">
            <strong>Plate Mechanics Tutorials</strong>
            <span className="pl-muted"> · </span>
            <a href="#stability">The stability limit of the explicit plate scheme</a>
          </nav>
          <article id="stability">
            <CflTutorial />
          </article>
        </div>
      </MDXProvider>
    </RunnerProvider>
  </StrictMode>,
);