Create baseline for modals for creating courses, uploading exams and …

…admin tooling like managing courses and exams.

Closing button of modal is commented out and click outside to close is not implemented yet because of vercel/next.js#52681

app/@modal/default.tsx

@@ -0,0 +1,5 @@
+const Default = () => {
+  return null
+}
+
+export default Default

app/default.tsx

@@ -0,0 +1,5 @@
+const Default = () => {
+  return null
+}
+
+export default Default

app/layout.tsx

@@ -36,6 +36,7 @@ const RootLayout = ({
         <Header />
         <div className="bg-yellow-500 pb-5">
           <div className="container mx-auto box-border max-w-screen-lg bg-gray-50 px-5 shadow-xl">
+            {modal}
             {children}
           </div>
         </div>

components/Modal.tsx

@@ -0,0 +1,36 @@
+// "use client"
+import React from 'react'
+
+// import { useRouter } from 'next/navigation'
+import { XCircleIcon } from '@heroicons/react/24/outline'
+
+const Modal = ({
+  children,
+  title
+}: {
+  children: React.ReactNode
+  title: string
+}) => {
+  // const router = useRouter()
+
+  return (
+    <div className="fixed bottom-0 left-0 right-0 top-0 h-screen w-screen overflow-y-auto overflow-x-hidden bg-black/40">
+      <div className="pointer-events-none relative mx-auto mt-36 w-full">
+        <div className="pointer-events-auto flex w-full flex-col bg-white bg-clip-padding">
+          <div className="flex flex-shrink-0 items-center justify-between px-20 py-5">
+            <h3 className="font-serif text-4xl font-extrabold text-gray-800">
+              {title}
+            </h3>
+            {/* <button onClick={() => router.back()}> */}
+            <XCircleIcon className="h-8 w-8 flex-shrink-0" />
+            {/* <p className="sr-only">Close</p> */}
+            {/* </button> */}
+          </div>
+          <div className="px-20 py-5">{children}</div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Modal