feat: update UI

src/components/PageHeader.jsx

@@ -1,12 +1,35 @@
-function PageHeader({ title, description }) {
+import { SearchField, Separator } from '@heroui/react';
+import {
+  BellIcon,
+  QuestionMarkCircleIcon,
+  UserCircleIcon
+} from '@heroicons/react/16/solid';
+
+function PageHeader() {
   return (
-    <header className="page-header">
+    <>
-      <div>
+      <div className="mb-3 flex flex-row items-center justify-between">
-        <h1>{title}</h1>
+        <SearchField name="search">
-        <p>{description}</p>
+          <SearchField.Group className="rounded-xl border border-gray-300 w-100">
+            <SearchField.SearchIcon />
+
+            <SearchField.Input
+              className="flex-1"
+              placeholder="Search LMS Author"
+            />
+
+            <SearchField.ClearButton />
+          </SearchField.Group>
+        </SearchField>
+        <div className="flex flex-row items-center gap-5">
+          <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>
-    </header>
+      <Separator className="my-4" />
-  )
+    </>
+  );
 }
 
-export default PageHeader
+export default PageHeader;

src/pages/Course/CoursesPage.jsx

@@ -1,4 +1,5 @@
 import CourseCard from '../../components/CourseCard.jsx';
+import PageHeader from '../../components/PageHeader.jsx';
 import {
   Typography,
   SearchField,
@@ -6,13 +7,7 @@ import {
   Button,
   Tabs
 } from '@heroui/react';
-import {
+import { FunnelIcon, PlusIcon } from '@heroicons/react/16/solid';
-  BellIcon,
-  QuestionMarkCircleIcon,
-  UserCircleIcon,
-  FunnelIcon,
-  PlusIcon
-} from '@heroicons/react/16/solid';
 
 const stats = [
   {
@@ -49,26 +44,7 @@ const stats = [
 function CoursePage() {
   return (
     <>
-      <div className="mb-3 flex flex-row items-center justify-between">
+      <PageHeader />
-        <SearchField name="search">
-          <SearchField.Group className="rounded-xl border border-gray-300 w-100">
-            <SearchField.SearchIcon />
-
-            <SearchField.Input
-              className="flex-1"
-              placeholder="Search LMS Author"
-            />
-
-            <SearchField.ClearButton />
-          </SearchField.Group>
-        </SearchField>
-        <div className="flex flex-row items-center gap-5">
-          <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 flex flex-row items-center justify-between">
         <div>
           <Typography variant="h3" className="mb-2">