feat: layout init

next.config.js

@@ -6,25 +6,15 @@ const withPWA = require('next-pwa')({
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-  webpack: (config, { dev }) => {
-    if (!dev) {
-      config.plugins = config.plugins.filter(
-        (plugin) => plugin.constructor.name !== 'ESLintWebpackPlugin'
-      );
-    }
-
-    return config;
-  },
   reactStrictMode: false,
   eslint: {
     ignoreDuringBuilds: true,
   },
   experimental: {
     scrollRestoration: true,
-    esmExternals: true, // Add this to ensure esmExternals is true
+    esmExternals: 'loose',
   },
-  ignoreDuringBuilds: true,
-  transpilePackages: ['react-md-editor']
+  transpilePackages: ['@uiw/react-md-editor', '@uiw/react-markdown-preview'],
 };
 
 module.exports = withPWA(removeImports(nextConfig));

package.json

@@ -19,14 +19,16 @@
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@headlessui/react": "^1.7.2",
     "@heroicons/react": "^2.0.13",
+    "@monaco-editor/react": "^4.6.0",
     "@mui/material": "^5.15.2",
     "@mui/x-charts": "^6.18.4",
     "@react-oauth/google": "^0.12.1",
     "@stripe/stripe-js": "^2.1.7",
     "@tailwindcss/forms": "^0.5.3",
     "@tremor/react": "^1.8.1",
     "@uiw/react-markdown-editor": "^6.1.1",
-    "@uiw/react-md-editor": "3.6.0",
+    "@uiw/react-markdown-preview": "^5.1.3",
+    "@uiw/react-md-editor": "^4.0.5",
     "@vercel/analytics": "^1.3.1",
     "asciinema-player": "3.6.3",
     "autoprefixer": "^10.4.12",
@@ -53,6 +55,7 @@
     "puppeteer": "^22.0.0",
     "react": "18.2.0",
     "react-activity-calendar": "^2.2.11",
+    "react-beautiful-dnd": "^13.1.1",
     "react-chartjs-2": "^5.2.0",
     "react-circular-progressbar": "^2.1.0",
     "react-collapsible": "^2.10.0",

src/components/StandardNav.jsx

@@ -314,6 +314,14 @@ export function StandardNav({ guestAllowed, alignCenter = true }) {
                     </Link>
                   </div>
                   <div className=" vertical-align md:ml-6 md:flex  ">
+                  <Link
+                      href="/learn/modules"
+                      className={
+                        linkClass('/learn') + ' hidden lg:inline-flex'
+                      }
+                    >
+                      Learn
+                    </Link>
                     <Link
                       href="/practice"
                       className={
@@ -648,6 +656,13 @@ export function StandardNav({ guestAllowed, alignCenter = true }) {
                   >
                     Dashboard
                   </Disclosure.Button>
+                  <Disclosure.Button
+                    as="a"
+                    href="../practice"
+                    className="block border-l-4 border-transparent py-2 pl-3 pr-4 text-base font-medium text-gray-300 hover:border-gray-300  hover:text-gray-100 sm:pl-5 sm:pr-6"
+                  >
+                    Learn
+                  </Disclosure.Button>
                   <Disclosure.Button
                     as="a"
                     href="../practice"