feat: update UI

src/pages/Course/CourseDetails.jsx

@@ -1,13 +1,9 @@
-import {
-  Card,
-  Button,
-  Typography,
-  TextField,
-  Input,
-  Label,
-  Chip,
-  TextArea
-} from '@heroui/react';
+import { Card } from '../../components/ui/card';
+import { Button } from '../../components/ui/button';
+import { Badge } from '../../components/ui/badge';
+import { Label } from '../../components/ui/label';
+import { Input } from '../../components/ui/input';
+import { Textarea } from '../../components/ui/textarea';
 import PageHeader from '../../components/PageHeader';
 import { useParams } from 'react-router-dom';
 
@@ -54,57 +50,56 @@ function CourseDetail() {
     <>
       <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">
+        <h2 className="text-xl font-bold text-app-text">{course?.title}</h2>
+        <div className="flex flex-row items-center gap-2">
+          <Button
+            color="gray"
+            className="rounded-xl bg-app-surface-muted text-app-text hover:bg-app-interactive-hover"
+          >
             Inactivate
           </Button>
-          <Button className="rounded-lg">Publish</Button>
+          <Button className="rounded-xl bg-app-primary text-white hover:bg-app-primary-dark">
+            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"
+          className="w-full max-w-100 overflow-hidden rounded-xl border border-app-border bg-white"
+          style={{ boxShadow: 'rgba(0,0,0,0.03) 0px 4px 24px' }}
         >
-          <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>
+          <div className="p-5">
+            <h4 className="font-medium text-app-text">Course Details</h4>
+          </div>
+          <div className="px-5 pb-5">
+            <div className="my-2 w-full max-w-64">
+              <Label className="mb-1 block text-app-text">Course Code</Label>
               <Input
-                className="rounded border border-gray-300"
                 value={course?.code}
+                readOnly
               />
-            </TextField>
-            <Label>Status</Label>
+            </div>
+            <Label className="mb-1 block text-app-text">Status</Label>
             {course?.status === 'Active' ? (
-              <Chip color="success" variant="primary">
+              <Badge className="rounded-[6px] bg-app-success text-app-success-text">
                 Active
-              </Chip>
+              </Badge>
             ) : (
-              <Chip>Inactive</Chip>
+              <Badge className="rounded-[8px] bg-app-neutral-badge text-app-neutral-badge-text">
+                Inactive
+              </Badge>
             )}
-            <TextField
-              className="w-full max-w-64 my-2"
-              name="Description"
-              type="text"
-            >
-              <Label>Description</Label>
-              <TextArea
+            <div className="my-2 w-full max-w-64">
+              <Label className="mb-1 block text-app-text">Description</Label>
+              <Textarea
                 className="max-h-50"
                 placeholder="..."
                 rows={4}
                 value={course?.description}
+                readOnly
               />
-            </TextField>
-          </Card.Content>
-          <Card.Footer />
+            </div>
+          </div>
         </Card>
       </div>
     </>