feat: implement TitleDashboard component and integrate it into UsersPage and AdvertisementsPage

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

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>
+  )
+}

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>
+  )
+}

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]">

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