fix: safecheck code

front/components/ui/header.tsx

@@ -7,7 +7,6 @@ import styled from "styled-components";
 export const Header = () => {
   return (
     <div>
-      <Menu></Menu>
     </div>
   );
 };

front/components/ui/layout.tsx

@@ -3,8 +3,16 @@ import Head from "next/head";
 import { Header } from "./header";
 import styled from "styled-components";
 import AuthProvider from "../security/AuthProvider";
+import { motion } from "framer-motion";
+import { Menu } from "./elements/menu";
 
 const Layout = (props: any) => {
+  const variants = {
+    hidden: { opacity: 0, x: 0, y: 0 },
+    enter: { opacity: 1, x: 0, y: 0 },
+    exit: { opacity: 0, x: 0, y: 0 },
+  };
+
   return (
     <div>
       <AuthProvider>
@@ -14,8 +22,17 @@ const Layout = (props: any) => {
           <link rel="icon" href="/favicon.ico" />
         </Head>
         <PreAlphaLabel>🚧 Pre-Alpha</PreAlphaLabel>
-        <Main className="min-h-screen">{props.children}</Main>
-
+        <Menu></Menu>
+        <motion.main
+          variants={variants} // Pass the variant object into Framer Motion
+          initial="hidden" // Set the initial state to variants.hidden
+          animate="enter" // Animated state to variants.enter
+          exit="exit" // Exit state (used later) to variants.exit
+          transition={{ type: "linear" }} // Set the transition to linear
+          className=""
+        >
+          <Main className="min-h-screen">{props.children}</Main>
+        </motion.main>
         <Footer>
           <a href="" target="_blank" rel="noopener noreferrer">
             <img src="/learnhouse_icon.png" alt="Learnhouse Logo" />
@@ -53,6 +70,6 @@ export const PreAlphaLabel = styled.div`
   font-size: 19px;
   font-weight: bold;
   border-radius: 5px 0 0 0px;
-  `;
+`;
 
 export default Layout;

front/pages/org/[orgslug]/course/[courseid].tsx

@@ -0,0 +1,32 @@
+import { useRouter } from "next/router";
+import React from "react";
+import Layout from "../../../../components/ui/layout";
+import { getCourse } from "../../../../services/courses";
+import { getOrganizationContextInfo } from "../../../../services/orgs";
+
+const CourseIdPage = () => {
+  const router = useRouter();
+  const { courseid } = router.query;
+  const { orgslug } = router.query;
+
+  const [isLoading, setIsLoading] = React.useState(true);
+  const [courseInfo, setCourseInfo] = React.useState("") as any;
+
+  async function fetchCourseInfo() {
+    const orgid = await getOrganizationContextInfo(orgslug);
+    const response = await getCourse(courseid, orgid);
+    const data = await response.json();
+    setCourseInfo(data);
+    setIsLoading(false);
+  }
+
+  React.useEffect(() => {
+    if (router.isReady) {
+      fetchCourseInfo();
+    }
+  }, [isLoading, router.isReady]);
+
+  return <Layout>{isLoading ? <div>Loading...</div> : <div>{courseInfo.name}</div>}</Layout>;
+};
+
+export default CourseIdPage;

front/services/courses.ts

@@ -14,3 +14,19 @@ export async function getOrgCourses(org_id: number) {
     .then((result) => result.json())
     .catch((error) => console.log("error", error));
 }
+
+export async function getCourse(org_id: any, course_id: any) {
+  const HeadersConfig = new Headers({ "Content-Type": "application/json" });
+
+  const requestOptions: any = {
+    method: "GET",
+    headers: HeadersConfig,
+    redirect: "follow",
+    credentials: "include",
+  };
+
+  // todo : add course id to url
+  return fetch(`${getAPIUrl()}courses/${course_id}`, requestOptions)
+    .then((result) => result.json())
+    .catch((error) => console.log("error", error));
+}