From d42ea410c6ae98b65861db8878bde7b82a60996d Mon Sep 17 00:00:00 2001
From: "fredy.siswanto" <fredy.siswanto@komunal.co.id>
Date: Mon, 24 Feb 2025 21:48:41 +0700
Subject: [PATCH] feat: implement TitleDashboard component and integrate it
 into UsersPage and AdvertisementsPage

---
 app/components/ui/pagination.tsx                    |  2 +-
 app/components/ui/title-dashboard.tsx               | 13 +++++++++++++
 app/pages/dashboard-advertisements/index.tsx        |  9 +++++++++
 app/pages/dashboard-users/index.tsx                 |  7 ++-----
 .../_layout.admin.dashboard.advertisements.tsx      |  4 +++-
 5 files changed, 28 insertions(+), 7 deletions(-)
 create mode 100644 app/components/ui/title-dashboard.tsx
 create mode 100644 app/pages/dashboard-advertisements/index.tsx

diff --git a/app/components/ui/pagination.tsx b/app/components/ui/pagination.tsx
index ddf5719..0dd37da 100644
--- a/app/components/ui/pagination.tsx
+++ b/app/components/ui/pagination.tsx
@@ -3,7 +3,7 @@ import React from 'react'
 import { ChevronIcon } from '~/components/icons/chevron'
 import { ChevronDoubleIcon } from '~/components/icons/chevron-double'
 
-interface PaginationProperties {
+type PaginationProperties = {
   currentPage: number
   totalPages: number
   onPageChange: (page: number) => void
diff --git a/app/components/ui/title-dashboard.tsx b/app/components/ui/title-dashboard.tsx
new file mode 100644
index 0000000..9a0c16d
--- /dev/null
+++ b/app/components/ui/title-dashboard.tsx
@@ -0,0 +1,13 @@
+type TitleDashboardProperties = {
+  title: string
+}
+export const TitleDashboard = (properties: TitleDashboardProperties) => {
+  const { title } = properties
+  return (
+    <div className="container mx-auto">
+      <div className="mb-5 flex items-center justify-between">
+        <h1 className="text-xl font-bold">{title}</h1>
+      </div>
+    </div>
+  )
+}
diff --git a/app/pages/dashboard-advertisements/index.tsx b/app/pages/dashboard-advertisements/index.tsx
new file mode 100644
index 0000000..69b2c1e
--- /dev/null
+++ b/app/pages/dashboard-advertisements/index.tsx
@@ -0,0 +1,9 @@
+import { TitleDashboard } from '~/components/ui/title-dashboard'
+
+export const AdvertisementsPage = () => {
+  return (
+    <div className="relative">
+      <TitleDashboard title="Advertisement" />
+    </div>
+  )
+}
diff --git a/app/pages/dashboard-users/index.tsx b/app/pages/dashboard-users/index.tsx
index 0053705..8862c8e 100644
--- a/app/pages/dashboard-users/index.tsx
+++ b/app/pages/dashboard-users/index.tsx
@@ -2,6 +2,7 @@ import { Field, Input, Label, Select } from '@headlessui/react'
 
 import { SearchIcon } from '~/components/icons/search'
 import { Pagination } from '~/components/ui/pagination'
+import { TitleDashboard } from '~/components/ui/title-dashboard'
 
 import { USERS } from './data'
 
@@ -19,11 +20,7 @@ export const UsersPage = () => {
 
   return (
     <div className="relative">
-      <div className="container mx-auto">
-        <section className="mb-5 flex items-center justify-between">
-          <h1 className="text-xl font-bold">User</h1>
-        </section>
-      </div>
+      <TitleDashboard title="Users" />
       {/* filter section */}
 
       <div className="mb-8 flex items-center gap-5 rounded-lg bg-gray-50 text-[#363636]">
diff --git a/app/routes/_layout.admin.dashboard.advertisements.tsx b/app/routes/_layout.admin.dashboard.advertisements.tsx
index 8288de7..d452a18 100644
--- a/app/routes/_layout.admin.dashboard.advertisements.tsx
+++ b/app/routes/_layout.admin.dashboard.advertisements.tsx
@@ -1,4 +1,6 @@
+import { AdvertisementsPage } from '~/pages/dashboard-advertisements'
+
 const DashboardAdvertisementsLayout = () => {
-  return <div>Advertisements Page</div>
+  return <AdvertisementsPage />
 }
 export default DashboardAdvertisementsLayout