From 3480e9997af759e42730cada55b1f5100de6661c Mon Sep 17 00:00:00 2001
From: Ehsan <ehsanahmadi8338@gmail.com>
Date: Tue, 9 Jul 2024 19:08:33 +0330
Subject: [PATCH] change footer & add pagination to doctors page & add page
 specialties

---
 app/specialties/page.js                 | 12 ++++++++++++
 components/doctors/listDoctors/index.js | 18 ++++++++++++++++++
 components/layout/Header.js             | 11 +++++++----
 components/layout/index.js              |  6 +++---
 components/specialties/index.js         |  7 +++++++
 5 files changed, 47 insertions(+), 7 deletions(-)
 create mode 100644 app/specialties/page.js
 create mode 100644 components/specialties/index.js

diff --git a/app/specialties/page.js b/app/specialties/page.js
new file mode 100644
index 0000000..3ebb4ec
--- /dev/null
+++ b/app/specialties/page.js
@@ -0,0 +1,12 @@
+import DoctorsPage from '@/components/doctors';
+import Layout from '@/components/layout';
+
+function Doctors() {
+    return (
+        <Layout title='تخصص ها' name='specialties'>
+            <DoctorsPage />
+        </Layout>
+    )
+}
+
+export default Doctors
\ No newline at end of file
diff --git a/components/doctors/listDoctors/index.js b/components/doctors/listDoctors/index.js
index 5d35112..140e78c 100644
--- a/components/doctors/listDoctors/index.js
+++ b/components/doctors/listDoctors/index.js
@@ -1,5 +1,6 @@
 import doctors from '@/data/doctors.json'
 import ItemDoctor from './ItemDoctor';
+import { Pagination } from '@mui/material';
 
 function ListDoctors() {
     return (
@@ -12,6 +13,23 @@ function ListDoctors() {
                     />
                 ))}
             </ul>
+            <div className='mt-[56px] flex justify-center'>
+                <Pagination
+                    // count={doctors.length / 12} org
+                    count={20} // test
+                    color='primary'
+                    sx={{
+                        '& .mui-8q7g72-MuiButtonBase-root-MuiPaginationItem-root': {
+                            color: '#616161',
+                            fontSize: '16px',
+                            fontWeight: '500'
+                        },
+                        '& .mui-8q7g72-MuiButtonBase-root-MuiPaginationItem-root.Mui-selected': {
+                            color: '#F8F8FF'
+                        }
+                    }}
+                />
+            </div>
         </div>
     )
 }
diff --git a/components/layout/Header.js b/components/layout/Header.js
index c631815..ebc6251 100644
--- a/components/layout/Header.js
+++ b/components/layout/Header.js
@@ -3,7 +3,10 @@ import { listNav } from "@/constans";
 import { Button } from "@mui/material";
 import Link from "next/link";
 
-function Header() {
+function Header({ name }) {
+
+    console.log(name);
+
     return (
         <div
             className="bg-[#FAFAFA] rounded-lg shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)] w-full mx-auto"
@@ -18,9 +21,9 @@ function Header() {
                             <Link
                                 href={nav.link}
                                 className={`
-                                ${nav.id === 1 ? 'text-[#526CAC]' : 'text-[#525252]'}
-                                text-[16px] font-medium
-                            `}
+                                ${nav.link.replace('/', '') === name ? '!text-[#526CAC]' : 'text-[#525252]'}
+                                    text-[16px] font-medium
+                                `}
                             >
                                 {nav.name}
                             </Link>
diff --git a/components/layout/index.js b/components/layout/index.js
index 1293df7..0e97f63 100644
--- a/components/layout/index.js
+++ b/components/layout/index.js
@@ -1,18 +1,18 @@
 import Footer from './Footer';
 import Header from './Header';
 
-function Layout({ children, title }) {
+function Layout({ children, title, name }) {
     return (
         <div>
             <main className="w-full min-h-screen">
                 <header className="w-full fixed top-10 right-1/2 translate-x-1/2 padding-responsive z-[10]">
-                    <Header />
+                    <Header name={name} />
                 </header>
                 <section>
                     {children}
                 </section>
             </main>
-            <footer className="bg-[#F5F5F5] mt-[206px] pt-[44px] bg-banner-footer !bg-center !bg-no-repeat !bg-cover">
+            <footer className="bg-[#F5F5F5] mt-[100px] pt-[44px] bg-banner-footer !bg-center !bg-no-repeat !bg-cover">
                 <div className='padding-responsive'>
                     <Footer />
                 </div>
diff --git a/components/specialties/index.js b/components/specialties/index.js
new file mode 100644
index 0000000..a0d9afa
--- /dev/null
+++ b/components/specialties/index.js
@@ -0,0 +1,7 @@
+function SpecialtiesPage() {
+    return (
+        <div>SpecialtiesPage</div>
+    )
+}
+
+export default SpecialtiesPage
\ No newline at end of file