From 2effe3a25fc10ce6b0cafcbc2020f39297c27cca Mon Sep 17 00:00:00 2001
From: 2nguyen <phuongnam.hainm3@fpt.net>
Date: Wed, 19 Aug 2026 14:43:10 +0700
Subject: [PATCH] feat: update UI

---
 src/components/PageHeader.jsx      | 39 ++++++++++++++++++++++++------
 src/pages/Course/CourseDetails.jsx |  0
 src/pages/Course/CoursesPage.jsx   | 30 +++--------------------
 3 files changed, 34 insertions(+), 35 deletions(-)
 create mode 100644 src/pages/Course/CourseDetails.jsx

diff --git a/src/components/PageHeader.jsx b/src/components/PageHeader.jsx
index 69a88a5..3c89534 100644
--- a/src/components/PageHeader.jsx
+++ b/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>
-        <h1>{title}</h1>
-        <p>{description}</p>
+    <>
+      <div className="mb-3 flex flex-row items-center justify-between">
+        <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>
-    </header>
-  )
+      <Separator className="my-4" />
+    </>
+  );
 }
 
-export default PageHeader
+export default PageHeader;
diff --git a/src/pages/Course/CourseDetails.jsx b/src/pages/Course/CourseDetails.jsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/pages/Course/CoursesPage.jsx b/src/pages/Course/CoursesPage.jsx
index 4d74516..3b633fb 100644
--- a/src/pages/Course/CoursesPage.jsx
+++ b/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 {
-  BellIcon,
-  QuestionMarkCircleIcon,
-  UserCircleIcon,
-  FunnelIcon,
-  PlusIcon
-} from '@heroicons/react/16/solid';
+import { 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">
-        <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" />
+      <PageHeader />
       <div className="mb-4 flex flex-row items-center justify-between">
         <div>
           <Typography variant="h3" className="mb-2">