Chapter 8 Done

app/(routes)/courses/_components/CourseList.tsx

@@ -0,0 +1,74 @@
+'use client'
+import React, { useEffect, useState } from 'react'
+import axios from 'axios'
+import Image from 'next/image'
+import { ChartNoAxesColumnIncreasing } from 'lucide-react'
+
+type Course = {
+  id: number
+  courseId: number
+  title: string
+  desc: string
+  level: string
+  bannerImage: string
+  tag: string
+}
+
+function CourseList() {
+  const [courseList, setCourseList] = useState<Course[]>([])
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    GetAllCourses()
+  }, [])
+
+  const GetAllCourses = async () => {
+    const result = await axios.get('/api/course')
+    setCourseList(result?.data)
+    setLoading(false)
+  }
+
+
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-8 mt-6">
+
+      {courseList?.map((course, index) => (
+        <div
+          key={index}
+          className="rounded-2xl border-6 border-zinc-800 bg-zinc-900 
+                     shadow-lg overflow-hidden hover:-translate-y-2 
+                     hover:shadow-2xl transform transition-all duration-300 cursor-pointer"
+        >
+
+
+          { <Image
+            src={course.bannerImage}
+            width={500}
+            height={300}
+            alt={course.title}
+            className="w-full h-[220px] object-cover"
+          />}
+
+          {/* Content */}
+          <div className="p-5 space-y-3">
+            <h2 className="font-game text-2xl">{course.title}</h2>
+
+            <p className="font-game text-lg text-gray-400 line-clamp-2">
+              {course.desc}
+            </p>
+
+            {/* Level Tag */}
+            <div className="flex items-center gap-2 bg-zinc-800 w-fit py-1 px-3 rounded-full">
+              <ChartNoAxesColumnIncreasing className="w-4 h-4 text-yellow-400" />
+              <span className="font-game text-sm text-gray-300">{course.level}</span>
+            </div>
+
+          </div>
+
+        </div>
+      ))}
+    </div>
+  )
+}
+
+export default CourseList

app/(routes)/courses/page.tsx

@@ -0,0 +1,46 @@
+import React from 'react'
+import Image from "next/image";
+import CourseList from './_components/CourseList';
+import Header from '@/app/_components/Header';
+
+function Courses() {
+  return (
+    <div className="bg-black min-h-screen">
+
+      {/* HEADER — Keep it OUTSIDE the relative banner */}
+      <div className="bg-black border-b border-zinc-800 font-game">
+        <div className="max-w-7xl mx-auto px-6 font-game">
+          <Header />
+        </div>
+      </div>
+
+      {/* BANNER */}
+      <div className="relative w-full">
+        <Image
+          src="/course-banner.gif"
+          alt="courseBanner"
+          width={1920}
+          height={400}
+          className="w-full h-[320px] object-cover"
+        />
+
+        {/* BANNER TEXT OVERLAY */}
+        <div className="absolute inset-0 bg-gradient-to-r from-black/70 to-transparent flex flex-col justify-center px-10 md:px-24 lg:px-36">
+          <h2 className="font-game text-5xl md:text-6xl text-white">Explore All Courses</h2>
+          <p className="font-game text-2xl md:text-3xl text-gray-200 mt-3">
+            Increase your skills with high-quality learning!
+          </p>
+        </div>
+      </div>
+
+      {/* COURSE SECTION */}
+      <div className="max-w-7xl mx-auto mt-10 px-10 md:px-24 lg:px-36">
+        <h2 className="font-game text-4xl mb-6">All Courses</h2>
+        <CourseList />
+      </div>
+
+    </div>
+  )
+}
+
+export default Courses

app/(routes)/dashboard/_components/EnrolledCourses.tsx

@@ -2,17 +2,24 @@
 
 import { Button } from "@/components/ui/button";
 import Image from "next/image";
+import Link from "next/link";
 import React, { useState } from 'react';
 
 function EnrolledCourses() {
   const [enrolledCourses, setEnrolledCourses] = useState([]);
 
   return (
     <div className="mt-8">
-        <h2 className="font-game mb-3 text-3xl">Your Enrolled courses</h2>
+      <h2 className="font-game mb-3 text-3xl">Your Enrolled Courses</h2>
+
       {enrolledCourses.length === 0 ? (
-        <div className="flex flex-col items-center gap-3 p-6 border-2 border-black rounded-2xl bg-zinc-900 shadow-[6px_6px_0_0_#000]">
+        <div className="
+          flex flex-col items-center text-center gap-4 
+          p-8 border-2 border-black rounded-2xl 
+          bg-zinc-900 shadow-[6px_6px_0_0_#000]
+        ">
 
+          {/* ICON */}
           <Image 
             src="/books.png" 
             alt="book"
@@ -21,14 +28,21 @@ function EnrolledCourses() {
             className="rounded-md"
           />
 
-          <h2 className="text-white text-lg font-semibold font-game ">
+          {/* TEXT */}
+          <h2 className="text-white text-xl font-game font-semibold">
             You don't have any enrolled courses
           </h2>
 
-          <Button variant="pixel" size="lg" className="mt-2 font-game text-xl">
-            Browse All Courses
-          </Button>
-
+          {/* BUTTON */}
+          <Link href="/courses">
+            <Button 
+              variant="pixel" 
+              size="lg" 
+              className="mt-2 font-game text-xl"
+            >
+              Browse All Courses
+            </Button>
+          </Link>
         </div>
       ) : (
         <div>

app/api/course/route.ts

@@ -0,0 +1,10 @@
+import {db} from '@/config/db';
+import { CourseTable } from '@/config/schema';
+import { NextRequest, NextResponse } from 'next/server';
+
+
+export async function GET(req:NextRequest){
+    const result =  await db.select().from(CourseTable);
+
+    return NextResponse.json(result)
+}

config/schema.tsx

@@ -7,3 +7,14 @@ export const usersTable = pgTable("users", {
   points: integer().default(0),
   subscription: varchar()
 });
+
+
+export const CourseTable = pgTable("courses",{
+  id: integer().primaryKey().generatedAlwaysAsIdentity(),
+  courseId: integer().notNull().unique(),
+  title: varchar().notNull(),
+  desc: varchar().notNull(),
+  bannerImage: varchar().notNull(),
+  level: varchar().default('Beginner'),
+  tags: varchar()
+})

next.config.ts

@@ -1,7 +1,9 @@
 import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
-  /* config options here */
+  images:{
+    domains:['ik.imagekit.io']
+  }
 };
 
 export default nextConfig;