PR comments

Author: CarolinaCobo

app/(app)/courses/[slug]/[id]/_client.tsx

@@ -0,0 +1,58 @@
+"use client";
+import { type Session } from "next-auth";
+import { notFound } from "next/navigation";
+import { isFlagEnabled, FEATURE_FLAGS } from "@/utils/flags";
+import { mockContentList, mockVideoSrc } from "../../mock";
+
+const Content = ({ session }: { session: Session | null }) => {
+  const flagEnabled = isFlagEnabled(FEATURE_FLAGS.COURSE_VIDEO);
+
+  if (!flagEnabled) {
+    notFound();
+  }
+
+  return (
+    <div className="flex w-full flex-grow flex-col">
+      <div className="w-full lg:grid lg:grid-cols-12 ">
+        {/* Video container */}
+        <div className="col-span-9 max-h-[60vh]">
+          <div className="flex h-full items-center justify-center">
+            <video
+              className="h-[60vh] w-[100vh] lg:h-full"
+              src={mockVideoSrc}
+              controls
+            >
+              <track
+                kind="captions"
+                src={mockVideoSrc}
+                srcLang="en"
+                label="English"
+              />
+              Your browser does not support the video tag.
+            </video>
+          </div>
+        </div>
+
+        {/* Sidebar */}
+        <div className="col-span-3 flex h-[60vh] w-full flex-col overflow-auto">
+          <ul className="p-4">
+            {mockContentList && mockContentList.length > 0 ? (
+              mockContentList.map((item, index) => (
+                <li key={index} className="mb-4 rounded bg-gray-100 p-2">
+                  <h3 className="font-bold">{item.title}</h3>
+                  <p className="text-sm text-gray-600">{item.description}</p>
+                </li>
+              ))
+            ) : (
+              <li className="text-center text-gray-500">
+                No content available
+              </li>
+            )}
+          </ul>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Content;