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,39 @@
+
+import React from "react";
+import { useRouter } from "next/router";
+import { mockCourses } from "./mock"; 
+import CourseCard from "./CourseCard";
+import { type Session } from "next-auth";
+
+const CoursesLanding = ({ session }: { session: Session | null }) => {
+  const router = useRouter(); // Initialize the useRouter hook
+
+  const handleStartCourse = (courseId: number) => {
+    // Navigate to the course content page
+    router.push(`/courses/${courseId}`);
+
+  };
+
+  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 with aria-label for accessibility */}
+      <div
+        className="grid grid-cols-1 gap-8 lg:grid-cols-2"
+        aria-label="List of available courses"
+      >
+        {mockCourses.map((course) => (
+          <CourseCard
+            key={course.id}
+            course={course}
+            onStartCourse={handleStartCourse}
+          />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default CoursesLanding;

components/Course/mock.ts

@@ -0,0 +1,61 @@
+import { Course } from "./type";
+
+// Define the UserProgress type
+type UserProgress = {
+  coursesProgress: Array<{
+    courseId: number; // Use string for the ID
+    progress: number; // Progress percentage
+    featured: boolean; // Include the featured status if needed
+  }>;
+};
+
+// Mock courses data
+export const mockCourses: Course[] = [
+  {
+    id: 1, // Changed to string
+    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 a focus on ES6+ features and asynchronous programming.',
+    progress: 65,
+    featured: false,
+  },
+  {
+    id: 3,
+    title: 'React for Beginners',
+    description: 'Understand the fundamentals of React and how to build interactive UIs.',
+    progress: 30,
+    featured: true,
+  },
+  {
+    id: 4,
+    title: 'Full-Stack Web Development',
+    description: 'Learn to build full-stack applications using modern technologies like Node.js and Express.',
+    progress: 45,
+    featured: false,
+  },
+  {
+    id: 5,
+    title: 'Version Control with Git and GitHub',
+    description: 'Master version control using Git and learn how to collaborate on GitHub.',
+    progress: 80,
+    featured: true,
+  },
+];
+
+// Function to generate user progress
+export const generateUserProgress = (courses: Course[]): UserProgress => ({
+  coursesProgress: courses.map(course => ({
+    courseId: course.id, // Use the course ID
+    progress: course.progress, // Use the course progress
+    featured: course.featured, // Include featured status if needed
+  })),
+});
+
+// Generate the user progress based on mockCourses
+export const userProgress: UserProgress = generateUserProgress(mockCourses);

components/Course/type.ts

@@ -0,0 +1,11 @@
+
+
+
+
+export interface Course {
+  id: number; 
+  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);
 };