feat: update UI

src/pages/Dashboard/DashboardPage.jsx

@@ -1,6 +1,11 @@
 import PageHeader from '../../components/PageHeader.jsx';
 import StatGrid from '../../components/StatGrid.jsx';
-import { Label, SearchField } from '@heroui/react';
+import { Typography, SearchField, Separator } from '@heroui/react';
+import {
+  BellIcon,
+  QuestionMarkCircleIcon,
+  UserCircleIcon
+} from '@heroicons/react/16/solid';
 
 const stats = [
   { label: 'Khoa hoc dang mo', value: '24' },
@@ -12,22 +17,37 @@ const stats = [
 function DashboardPage() {
   return (
     <>
-      <PageHeader
+      {/* <PageHeader
         title="Tong quan"
         description="Theo doi nhanh tinh hinh dao tao va cac chi so LMS."
-      />
+      /> */}
-      <div className="mb-3 flex flex-col">
+      <div className="mb-3 flex flex-row items-center justify-between">
         <SearchField name="search">
-          <Label>Search</Label>
-
           <SearchField.Group className="w-[280px]">
             <SearchField.SearchIcon />
 
-            <SearchField.Input className="flex-1" placeholder="Search..." />
+            <SearchField.Input
+              className="flex-1"
+              placeholder="Search LMS Author"
+            />
 
             <SearchField.ClearButton />
           </SearchField.Group>
         </SearchField>
+        <div className="flex flex-row items-center gap-2">
+          <BellIcon className="mr-1 inline h-6 w-6" />
+          <QuestionMarkCircleIcon className="mr-1 inline h-6 w-6" />
+          <UserCircleIcon className="mr-1 inline h-6 w-6" />
+        </div>
+      </div>
+      <Separator className="my-4" />
+      <div className="mb-4">
+        <Typography variant="h3" className="mb-2">
+          Course
+        </Typography>
+        <Typography variant="body1" className="text-gray-600">
+          Manage and organize your learning content.
+        </Typography>
       </div>
       <StatGrid items={stats} />
     </>