fix responsive all pages & change style page list blog and blog item & add date picker

components/doctor/appointmentList/index.js

@@ -1,14 +1,28 @@
+'use client';
+
+import { useState } from 'react';
+
 import turns from '@/data/turns.json';
-import ItemAppointment from './ItemAppointment';
+import ModalDatePicker from './modal';
 import { Button } from '@mui/material';
+import ItemAppointment from './ItemAppointment';
 import ArrowLeftD from '@/components/icons/ArrowLeftD';
 
 function AppointmentList({ doctor }) {
 
     const itemActive = turns[0];
 
+    const [open, setOpen] = useState(true);
+
+    const handleOpen = () => setOpen(true);
+    const handleClose = () => setOpen(false);
+
     return (
         <>
+            <ModalDatePicker
+                open={open}
+                handleClose={handleClose}
+            />
             <ul className="hidden lg:flex w-[38%] flex-col justify-start items-center gap-8">
                 {turns.map(item => (
                     <ItemAppointment