Comments

Author: CarolinaCobo

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

@@ -0,0 +1,71 @@
+"use client";
+import { FEATURE_FLAGS, isFlagEnabled } from "@/utils/flags";
+import { CheckCircle, CircleCheck, PlayCircle, SquarePlay } from "lucide-react";
+import { type Session } from "next-auth";
+import { notFound } from "next/navigation";
+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 divide-x divide-gray-700 lg:grid lg:grid-cols-12">
+        {/* Video container */}
+        <div className="col-span-9">
+          <div className="bg-black">
+            <iframe
+              className="aspect-video w-full"
+              src="https://www.youtube.com/embed/Q68wOyeG5lc"
+              title="YouTube video"
+            ></iframe>
+          </div>
+        </div>
+
+        {/* Sidebar */}
+        <div className="col-span-3 flex w-full flex-col overflow-auto">
+          <ul className="divide-y divide-gray-700">
+            {mockContentList && mockContentList.length > 0 ? (
+              mockContentList.map((item, index) => (
+                <li
+                  key={index}
+                  className="flex flex-row items-center justify-between px-2  py-2 "
+                >
+                  <div className="flex flex-row items-center">
+                    <SquarePlay
+                      className="mr-4 h-5 w-5 text-white group-hover:text-white"
+                      aria-hidden="true"
+                    />
+                    <p>{item.title}</p>
+                  </div>
+                  <CircleCheck
+                    className={
+                      item.watched
+                        ? "mr-2 h-5 w-5 text-pink-600"
+                        : "mr-2 h-5 w-5 text-white"
+                    }
+                    aria-hidden="true"
+                  />
+                </li>
+              ))
+            ) : (
+              <li className="text-center text-gray-500">
+                No content available
+              </li>
+            )}
+          </ul>
+        </div>
+      </div>
+      <div className="flex-none">
+        <div>Video title</div>
+        <div>descritpion</div>
+      </div>
+    </div>
+  );
+};
+
+export default Content;

app/(app)/page.tsx

@@ -55,7 +55,7 @@ const Home = async () => {
             <div className="mb-8 mt-2 rounded border border-neutral-300 bg-white text-neutral-900 dark:border-neutral-600 dark:bg-neutral-900 dark:text-neutral-50">
               <Link href="/articles/join-our-6-week-writing-challenge-quohtgqb">
                 <Image
-                  className="w-full"
+                  className="w-full rounded-t"
                   src={challenge}
                   alt={`"Codú Writing Challenge" text on white background`}
                 />

components/ArticlePreview/ArticlePreview.tsx

@@ -84,7 +84,8 @@ const ArticlePreview: NextPage<Props> = ({
   };
 
   return (
-    <article className="my-2 rounded border border-l-4 border-neutral-300 border-l-pink-600 bg-white p-4 dark:border-neutral-600 dark:border-l-pink-600 dark:bg-neutral-900">
+    <article className="relative my-2 rounded border border-l-0 border-l-4 border-neutral-300 bg-white p-4 dark:border-neutral-600 dark:border-l-pink-600 dark:bg-neutral-900">
+      <div className="absolute bottom-0 left-0 top-0 flex justify-between border-l-4 border-l-pink-500 dark:border-l-pink-500"></div>
       <div className="flex justify-between">
         <div className="mb-4 flex items-center">
           <span className="sr-only">{name}</span>