refactor: refactor structures

2026-08-19 14:26:13 +07:00
parent fd11fa59b1
commit d3cc4c077c
5 changed files with 13 additions and 38 deletions
@@ -0,0 +1,153 @@
+import CourseCard from '../../components/CourseCard.jsx';
+import {
+  Typography,
+  SearchField,
+  Separator,
+  Button,
+  Tabs
+} from '@heroui/react';
+import {
+  BellIcon,
+  QuestionMarkCircleIcon,
+  UserCircleIcon,
+  FunnelIcon,
+  PlusIcon
+} from '@heroicons/react/16/solid';
+
+const stats = [
+  {
+    code: 'LDR-101',
+    title: 'Foundations of Modern Leadership',
+    description:
+      'An introductory course covering essential leadership principles for new managers.',
+    status: 'Published',
+    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: 'Draft',
+    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: 'Archived',
+    lastUpdate: '2026-08-19',
+    image:
+      'https://images.unsplash.com/photo-1497366754035-f200968a6e72?auto=format&fit=crop&w=800&q=80'
+  }
+];
+
+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" />
+      <div className="mb-4 flex flex-row items-center justify-between">
+        <div>
+          <Typography variant="h3" className="mb-2">
+            Course
+          </Typography>
+          <Typography variant="body1" className="text-gray-600">
+            Manage and organize your learning content.
+          </Typography>
+        </div>
+        <div className="flex flex-row item-center gap-2">
+          <Button variant="outline" className="rounded-lg">
+            <FunnelIcon />
+            Filter
+          </Button>
+          <Button className="rounded-lg">
+            <PlusIcon />
+            New Course
+          </Button>
+        </div>
+      </div>
+      <Separator className="my-4" />
+      <div className="flex flex-row items-center justify-between my-3 bg-white rounded-md border p-3">
+        <Tabs defaultSelectedKey="all" className="w-fit">
+          <Tabs.ListContainer>
+            <Tabs.List
+              aria-label="Course status"
+              className="gap-1 rounded-md bg-gray-100"
+            >
+              <Tabs.Tab
+                id="all"
+                className="h-7 rounded px-6 py-5 text-base font-normal text-gray-700"
+              >
+                All
+                <Tabs.Indicator className="rounded bg-white shadow-sm" />
+              </Tabs.Tab>
+
+              <Tabs.Tab
+                id="draft"
+                className="h-7 rounded px-6 py-5 text-base font-normal text-gray-500"
+              >
+                Draft
+                <Tabs.Indicator className="rounded bg-white shadow-sm" />
+              </Tabs.Tab>
+
+              <Tabs.Tab
+                id="published"
+                className="h-7 rounded px-6 py-5 text-base font-normal text-gray-500"
+              >
+                Published
+                <Tabs.Indicator className="rounded bg-white shadow-sm" />
+              </Tabs.Tab>
+
+              <Tabs.Tab
+                id="archived"
+                className="h-7 rounded px-6 py-5 text-base font-normal text-gray-500"
+              >
+                Archived
+                <Tabs.Indicator className="rounded bg-white shadow-sm" />
+              </Tabs.Tab>
+            </Tabs.List>
+          </Tabs.ListContainer>
+        </Tabs>
+        <SearchField name="search">
+          <SearchField.Group className="rounded-xl border border-gray-300 w-100">
+            <SearchField.SearchIcon />
+
+            <SearchField.Input placeholder="Search course by title or code..." />
+
+            <SearchField.ClearButton />
+          </SearchField.Group>
+        </SearchField>
+      </div>
+      <div className="grid grid-cols-1 gap-5 md:grid-cols-2 xl:grid-cols-4">
+        {stats.map((course) => (
+          <CourseCard key={course.code} course={course} image={course.image} />
+        ))}
+      </div>
+    </>
+  );
+}
+
+export default CoursePage;