Course landing page

app/(app)/feature-flag-example/_client.tsx

@@ -1,24 +1,20 @@
 "use client";
+
 import { type Session } from "next-auth";
 import { notFound } from "next/navigation";
 import { isFlagEnabled, FEATURE_FLAGS } from "@/utils/flags";
+import CoursesLanding from "@/components/Course";
 
 const Content = ({ session }: { session: Session | null }) => {
-  const flagEnabled = isFlagEnabled(FEATURE_FLAGS.FEATURE_FLAG_TEST);
+  const flagEnabled = isFlagEnabled(FEATURE_FLAGS.COURSES_LANDING); // Adjust to the correct flag
 
   if (!flagEnabled) {
-    notFound();
+    notFound(); // Show 404 page if the feature flag is not enabled
   }
 
   return (
-    <div className="mx-auto max-w-2xl">
-      <h1 className="text-lg">
-        This page is behind a feature flag. It will work in development or when
-        the flag is turned on.
-      </h1>
-      <p className="mt-8 text-sm">
-        {session ? "User is logged in" : "User is not logged in"}
-      </p>
+    <div className="mx-auto max-w-6xl">
+      <CoursesLanding session={session} />
     </div>
   );
 };

app/(app)/feature-flag-example/page.tsx

@@ -2,11 +2,11 @@ import Content from "./_client";
 import { getServerAuthSession } from "@/server/auth";
 
 export const metadata = {
-  title: "This is a feature flag example",
+  title: "Courses Landing Page",
 };
 
-export default async function Page() {
-  // Example of grabbing session in case it is needed
+export default async function CoursesPage() {
+  // Get session if needed for authentication purposes
   const session = await getServerAuthSession();
 
   return <Content session={session} />;

components/Course/CourseCard.tsx

@@ -0,0 +1,42 @@
+
+import React from "react";
+import { Course } from "./type"; 
+
+interface CourseCardProps {
+  course: Course;
+  onStartCourse: (courseId: number) => void; // Change to number to match your mock data
+}
+
+const CourseCard: React.FC<CourseCardProps> = ({ course, onStartCourse }) => {
+  return (
+    <div
+      className={`rounded-lg p-6 shadow-md ${course.featured ? "bg-orange-100 dark:bg-orange-900" : "bg-gray-100 dark:bg-gray-800"}`}
+    >
+      {/* Course Title */}
+      <h2 className="mb-4 text-2xl font-bold">{course.title}</h2>
+
+      {/* Course Description */}
+      <p className="mb-4 text-lg text-gray-700 dark:text-gray-300">
+        {course.description}
+      </p>
+
+      {/* Course Progress */}
+      <div className="flex items-center gap-4">
+        <p className="text-lg">Progress:</p>
+        <div className="flex h-16 w-16 items-center justify-center rounded-full bg-pink-500 text-lg font-bold">
+          {course.progress}%
+        </div>
+      </div>
+
+      {/* Start Course Button */}
+      <button
+        className="mt-4 rounded bg-orange-500 px-4 py-2 text-white hover:bg-orange-600"
+        onClick={() => onStartCourse(Number(course.id))} // Call the passed function with course ID
+      >
+        Start Course
+      </button>
+    </div>
+  );
+};
+
+export default CourseCard;

components/Course/index.tsx

@@ -0,0 +1,32 @@
+
+import React from "react";
+import { mockCourses, userProgress } from "./mock";
+import CourseCard from "./CourseCard";
+import { type Session } from "next-auth";
+
+const CoursesLanding = ({ session }: { session: Session | null }) => {
+  const handleStartCourse = (courseId: number) => {
+    console.log(`Starting course with ID: ${courseId}`);
+    // Add logic here to navigate to the course content page or start the course
+  };
+
+  return (
+    <div className="flex min-h-screen flex-col gap-8 px-4 py-8 dark:bg-gray-900 dark:text-white lg:px-16 lg:py-12">
+      {/* Page Title */}
+      <h1 className="mb-6 text-3xl font-bold lg:text-4xl">Courses</h1>
+
+      {/* Courses List */}
+      <div className="grid grid-cols-1 gap-8 lg:grid-cols-2">
+        {mockCourses.map((course) => (
+          <CourseCard
+            key={course.id}
+            course={course}
+            onStartCourse={handleStartCourse}
+          />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default CoursesLanding;

components/Course/mock.ts

@@ -0,0 +1,54 @@
+import { Course } from "./type";
+
+export const mockCourses: Course[] = [
+  {
+    id: "1", 
+    title: "Introduction to Web Development",
+    description:
+      "Learn the basics of HTML, CSS, and JavaScript to build responsive websites.",
+    progress: 90,
+    featured: true, 
+  },
+  {
+    id: "2", 
+    title: "Advanced JavaScript Concepts",
+    description:
+      "Deep dive into JavaScript with advanced concepts and techniques.",
+    progress: 65,
+    featured: false, 
+  },
+  {
+    id: "3", 
+    title: "React for Beginners",
+    description: "Get started with React and build interactive UIs.",
+    progress: 30,
+    featured: false, 
+  },
+  {
+    id: "4", 
+    title: "Full-Stack Web Development",
+    description:
+      "Become a full-stack developer by learning both front-end and back-end technologies.",
+    progress: 45,
+    featured: true, 
+  },
+  {
+    id: "5", 
+    title: "Version Control with Git and GitHub",
+    description:
+      "Learn how to use Git for version control and GitHub for collaboration.",
+    progress: 80,
+    featured: false, 
+  },
+];
+
+// Function to generate user progress from courses
+export const generateUserProgress = (courses: Course[]) => ({
+  coursesProgress: courses.map((course) => ({
+    courseId: course.id, 
+    progress: course.progress,
+    featured: course.featured, 
+  })),
+});
+
+export const userProgress = generateUserProgress(mockCourses);

components/Course/type.ts

@@ -0,0 +1,7 @@
+export interface Course {
+  id: string;
+  title: string;
+  description: string;
+  progress: number;
+  featured: boolean;
+}

utils/flags.ts

@@ -2,7 +2,7 @@ import { posthog } from "posthog-js";
 
 export const FEATURE_FLAGS = {
   FEATURE_FLAG_TEST: "feature-flag-test",
-  // Add more feature flags as needed
+  COURSES_LANDING: "courses-landing",
 } as const;
 
 export type FeatureFlagName =
@@ -17,11 +17,11 @@ export function isDevEnvironment() {
 
 export const isFlagEnabled = (
   featureFlag: FeatureFlagName,
-  disableDevCheck = false, // Disable dev check to force feature flag to be checked always
+  disableDevCheck = false,
 ) => {
   if (!disableDevCheck && isDevEnvironment()) {
     console.log("Feature flag check skipped in development environment");
-    return true;
+    return true; // Always true in dev environments unless you want to test differently
   }
   return posthog.isFeatureEnabled(featureFlag);
 };