respnsive pages

components/doctor/appointmentList/index.js

@@ -1,16 +1,36 @@
 import turns from '@/data/turns.json';
 import ItemAppointment from './ItemAppointment';
+import { Button } from '@mui/material';
+import ArrowLeftD from '@/components/icons/ArrowLeftD';
+
+function AppointmentList({ doctor }) {
+
+    const itemActive = turns[0];
 
-function AppointmentList() {
     return (
-        <ul className="w-[40%] flex flex-col justify-start items-center gap-8">
-            {turns.map(item => (
-                <ItemAppointment
-                    turn={item}
-                    key={item.id}
-                />
-            ))}
-        </ul>
+        <>
+            <ul className="hidden lg:flex w-[38%] flex-col justify-start items-center gap-8">
+                {turns.map(item => (
+                    <ItemAppointment
+                        turn={item}
+                        key={item.id}
+                        doctor={doctor}
+                    />
+                ))}
+            </ul>
+            <div className='fixed lg:hidden bg-[#FFF] border-t border-transparent border-t-[#D7D7D7] border-solid bottom-0 right-0 w-full p-4 flex items-center justify-between'>
+                <p className='text-[#05BA58] text-[11px] font-normal'>اولین نوبت آزاد: {itemActive.first_free_turn}</p>
+                <Button
+                    variant='contained'
+                    className='!py-2 !px-4 gap-1 !text-[14px] !font-medium'
+                >
+                    دریافت نوبت
+                    <div className='w-[20px] h-[20px]'>
+                        <ArrowLeftD />
+                    </div>
+                </Button>
+            </div>
+        </>
     )
 }