feat: add page course details

src/components/CourseCard.jsx

@@ -2,12 +2,11 @@ import { Card, Button } from '@heroui/react';
 import { PencilIcon, EllipsisVerticalIcon } from '@heroicons/react/24/outline';
 
 const statusStyles = {
-  Published: 'bg-green-100 text-green-700',
-  Draft: 'bg-yellow-100 text-yellow-700',
-  Archived: 'bg-gray-100 text-gray-600'
+  Active: 'bg-green-100 text-green-700',
+  Inactive: 'bg-gray-100 text-gray-600'
 };
 
-function CourseCard({ course, image }) {
+function CourseCard({ course, image, handleClick }) {
   const { code, title, description, status, lastUpdate } = course;
 
   const formattedDate = new Date(lastUpdate).toLocaleDateString('en-GB', {
@@ -20,19 +19,19 @@ function CourseCard({ course, image }) {
     <Card
       variant="default"
       className="w-full max-w-100 overflow-hidden rounded-lg border border-gray-300 bg-white shadow-none"
+      onClick={handleClick}
     >
       {/* Image */}
-      <div className="relative h-48 overflow-hidden border-b border-gray-300">
+      <div className="relative h-48 cursor-pointer overflow-hidden border-b border-gray-300">
         <img src={image} alt={title} className="h-full w-full object-cover" />
 
-        {/* Course code */}
         <div className="absolute left-4 top-4 rounded-sm border border-gray-300 bg-white px-3 py-1.5">
           <span className="text-lg font-semibold text-gray-800">{code}</span>
         </div>
       </div>
 
       {/* Content */}
-      <Card.Content className="px-5 py-5">
+      <Card.Content className="cursor-pointer px-5 py-5">
         <h3 className="mb-3 text-xl font-bold leading-tight text-gray-900">
           {title}
         </h3>
@@ -43,7 +42,13 @@ function CourseCard({ course, image }) {
       </Card.Content>
 
       {/* Footer */}
-      <Card.Footer className="mx-5 flex items-center justify-between border-t border-gray-300 px-0 py-5">
+      <Card.Footer
+        className="mx-5 flex items-center justify-between border-t border-gray-300 px-0 py-5"
+        onClick={(e) => {
+          e.stopPropagation();
+          // handle edit
+        }}
+      >
         <div className="flex items-center gap-2">
           <span
             className={`rounded-full px-2.5 py-1 text-sm font-medium ${
@@ -62,6 +67,10 @@ function CourseCard({ course, image }) {
             variant="ghost"
             size="sm"
             aria-label={`Edit ${title}`}
+            onClick={(e) => {
+              e.stopPropagation();
+              // handle edit
+            }}
           >
             <PencilIcon className="h-5 w-5" />
           </Button>
@@ -71,6 +80,10 @@ function CourseCard({ course, image }) {
             variant="ghost"
             size="sm"
             aria-label={`More actions for ${title}`}
+            onClick={(e) => {
+              e.stopPropagation();
+              // handle edit
+            }}
           >
             <EllipsisVerticalIcon className="h-5 w-5" />
           </Button>