feat: add page course details

2026-08-19 21:15:42 +07:00
parent 2effe3a25f
commit fd85fd894b
4 changed files with 155 additions and 23 deletions
@@ -0,0 +1,114 @@
+import {
+  Card,
+  Button,
+  Typography,
+  TextField,
+  Input,
+  Label,
+  Chip,
+  TextArea
+} from '@heroui/react';
+import PageHeader from '../../components/PageHeader';
+import { useParams } from 'react-router-dom';
+
+const data = [
+  {
+    code: 'LDR-101',
+    title: 'Foundations of Modern Leadership',
+    description:
+      'An introductory course covering essential leadership principles for new managers.',
+    status: 'Active',
+    lastUpdate: '2026-08-19',
+    image:
+      'https://images.unsplash.com/photo-1556761175-b413da4baf72?auto=format&fit=crop&w=800&q=80'
+  },
+  {
+    code: 'TEC-204',
+    title: 'Advanced Cloud Architecture Patterns',
+    description:
+      'Deep dive into scalable cloud infrastructure design and implementation strategies.',
+    status: 'Inactive',
+    lastUpdate: '2026-08-19',
+    image:
+      'https://images.unsplash.com/photo-1533090161767-e6ffed986c88?auto=format&fit=crop&w=800&q=80'
+  },
+  {
+    code: 'CMP-099',
+    title: '2022 Annual Compliance Review',
+    description: 'Outdated compliance materials from the previous fiscal year.',
+    status: 'Inactive',
+    lastUpdate: '2026-08-19',
+    image:
+      'https://images.unsplash.com/photo-1497366754035-f200968a6e72?auto=format&fit=crop&w=800&q=80'
+  }
+];
+
+function CourseDetail() {
+  const { courseId } = useParams();
+  const course = data.find((e) => e.code === courseId);
+
+  if (!course) {
+    return <div>Course not found</div>;
+  }
+  return (
+    <>
+      <PageHeader />
+      <div className="mb-4 flex flex-row items-center justify-between">
+        <Typography className="font-bold">{course?.title}</Typography>
+        <div className="flex flex-row item-center gap-2">
+          <Button variant="outline" className="rounded-lg">
+            Inactivate
+          </Button>
+          <Button className="rounded-lg">Publish</Button>
+        </div>
+      </div>
+      <div>
+        <Card
+          variant="default"
+          className="w-full max-w-100 overflow-hidden rounded-lg border border-gray-300 bg-white shadow-none"
+        >
+          <Card.Header>
+            <Typography className="font-medium">Course Details</Typography>
+          </Card.Header>
+          <Card.Content>
+            <TextField
+              className="w-full max-w-64 my-2"
+              name="Course Code"
+              type="text"
+            >
+              <Label>Course Code</Label>
+              <Input
+                className="rounded border border-gray-300"
+                value={course?.code}
+              />
+            </TextField>
+            <Label>Status</Label>
+            {course?.status === 'Active' ? (
+              <Chip color="success" variant="primary">
+                Active
+              </Chip>
+            ) : (
+              <Chip>Inactive</Chip>
+            )}
+            <TextField
+              className="w-full max-w-64 my-2"
+              name="Description"
+              type="text"
+            >
+              <Label>Description</Label>
+              <TextArea
+                className="max-h-50"
+                placeholder="..."
+                rows={4}
+                value={course?.description}
+              />
+            </TextField>
+          </Card.Content>
+          <Card.Footer />
+        </Card>
+      </div>
+    </>
+  );
+}
+
+export default CourseDetail;