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

components/doctor/appointmentList/modal/index.js

@@ -0,0 +1,18 @@
+import { Box, Modal } from "@mui/material"
+import { styleDefault } from "@/mui"
+import DatePicker from "@/app/component/datePicker"
+
+function ModalDatePicker({ open, handleClose }) {
+    return (
+        <Modal
+            open={open}
+            onClose={handleClose}
+        >
+            <Box sx={styleDefault}>
+                <DatePicker />
+            </Box>
+        </Modal>
+    )
+}
+
+export default ModalDatePicker