finish design doctor item & change basic responsive style

components/doctor/appointmentList/AppointmentList.js

@@ -1,7 +0,0 @@
-function AppointmentList() {
-    return (
-        <div className="w-[40%]">AppointmentList</div>
-    )
-}
-
-export default AppointmentList

components/doctor/appointmentList/ItemAppointment.js

@@ -0,0 +1,42 @@
+import ArrowLeftD from '@/components/icons/ArrowLeftD'
+import ClockTurn from '@/components/icons/ClockTurn'
+import GreenCalendarTurn from '@/components/icons/GreenCalendarTurn'
+import LocationTurn from '@/components/icons/LocationTurn'
+import { Button } from '@mui/material'
+import React from 'react'
+
+function ItemAppointment({ turn }) {
+    return (
+        <li
+            key={turn.id}
+            className='py-4 w-full px-6 bg-[#FFF] border border-solid border-[#EFEFEF] rounded-lg'
+        >
+            <p className='text-[#3B3B3B] text-[20px] font-bold'>نوبت دهی</p>
+            <div className='flex flex-col items-start justify-center mt-6 gap-6'>
+                <div className='flex items-center justify-start gap-1'>
+                    <LocationTurn />
+                    <p className='text-[#525252] text-[14px] font-normal'>آدرس: {turn.location}</p>
+                </div>
+                <div className='flex items-center justify-start gap-1'>
+                    <ClockTurn />
+                    <p className='text-[#525252] text-[14px] font-normal'>ساعت کاری: {turn.hours_of_work}</p>
+                </div>
+            </div>
+            <div className='flex mt-6 items-center justify-between'>
+                <div className='flex items-center justify-start gap-1'>
+                    <GreenCalendarTurn />
+                    <p className='text-[#05BA58] text-[12px] font-medium'>اولین نوبت آزاد: {turn.first_free_turn}</p>
+                </div>
+                <Button
+                    variant='contained'
+                    className='!py-2 !px-6 gap-1'
+                >
+                    دریافت نوبت
+                    <ArrowLeftD />
+                </Button>
+            </div>
+        </li>
+    )
+}
+
+export default ItemAppointment

components/doctor/appointmentList/index.js

@@ -0,0 +1,17 @@
+import turns from '@/data/turns.json';
+import ItemAppointment from './ItemAppointment';
+
+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>
+    )
+}
+
+export default AppointmentList

components/doctor/detailDoctor/cards/comments/commentUser/index.js

@@ -1,6 +1,6 @@
 'use client';
 import { useState } from 'react';
-import ItemUser from './Item'
+import ItemUser from './ItemUser'
 
 function CommentUser({ doctor }) {
 

components/doctor/index.js

@@ -1,4 +1,4 @@
-import AppointmentList from "./appointmentList/AppointmentList"
+import AppointmentList from "./appointmentList"
 import DetailDoctor from "./detailDoctor"
 
 function DoctorPage({ doctor }) {