feat: update UI dashboard page

2026-08-19 11:37:47 +07:00
parent 3f56f788d1
commit 31cc376e4f
8 changed files with 245 additions and 229 deletions
@@ -0,0 +1,83 @@
+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'
+};
+
+function CourseCard({ course, image }) {
+  const { code, title, description, status, lastUpdate } = course;
+
+  const formattedDate = new Date(lastUpdate).toLocaleDateString('en-GB', {
+    day: '2-digit',
+    month: '2-digit',
+    year: 'numeric'
+  });
+
+  return (
+    <Card
+      variant="default"
+      className="w-full max-w-100 overflow-hidden rounded-lg border border-gray-300 bg-white shadow-none"
+    >
+      {/* Image */}
+      <div className="relative h-48 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">
+        <h3 className="mb-3 text-xl font-medium leading-tight text-gray-900">
+          {title}
+        </h3>
+
+        <p className="line-clamp-2 text-lg leading-8 text-gray-700">
+          {description}
+        </p>
+      </Card.Content>
+
+      {/* Footer */}
+      <Card.Footer className="mx-5 flex items-center justify-between border-t border-gray-300 px-0 py-5">
+        <div className="flex items-center gap-2">
+          <span
+            className={`rounded-full px-2.5 py-1 text-sm font-medium ${
+              statusStyles[status] ?? 'bg-gray-100 text-gray-600'
+            }`}
+          >
+            {status}
+          </span>
+
+          <span className="text-sm text-gray-600">Updated {formattedDate}</span>
+        </div>
+
+        <div className="flex items-center gap-1">
+          <Button
+            isIconOnly
+            variant="ghost"
+            size="sm"
+            aria-label={`Edit ${title}`}
+          >
+            <PencilIcon className="h-5 w-5" />
+          </Button>
+
+          <Button
+            isIconOnly
+            variant="ghost"
+            size="sm"
+            aria-label={`More actions for ${title}`}
+          >
+            <EllipsisVerticalIcon className="h-5 w-5" />
+          </Button>
+        </div>
+      </Card.Footer>
+    </Card>
+  );
+}
+
+export default CourseCard;