design dashboard comments & messages & modals

components/dashboard/userAccount/tabs/comments/Comment.js

@@ -1,4 +1,8 @@
+import CalndarD from "@/components/icons/CalndarD"
+import TrashOrangeD from "@/components/icons/TrashOrangeD"
+import { Button, Rating } from "@mui/material"
 import Image from "next/image"
+import ModalDeleteComment from "./modal"
 
 function Comment({ data }) {
     return (
@@ -13,8 +17,29 @@ function Comment({ data }) {
                         height={87}
                         width={87}
                     />
+                    <div className="flex flex-col items-start justify-center gap-[16px]">
+                        <p className="text-[#3B3B3B] text-[16px] font-bold">{data.name_doctor}</p>
+                        <p className="text-[#525252] text-[14px] font-medium">تخصص: {data.expertise}</p>
+                    </div>
                 </div>
+                <ModalDeleteComment />
             </div>
+            <Rating
+                defaultValue={data.stars.value}
+                className="!mt-[8px]"
+                sx={{
+                    '& .MuiSvgIcon-root': {
+                        width: '16px',
+                        height: '16px'
+                    }
+                }}
+            />
+            <p className="text-[#525252] text-[14px] font-normal leading-[33px]">{data.comment}</p>
+            <div className="flex items-center justify-start gap-[8px]">
+                <CalndarD />
+                <p className="text-[#7E7E7E] text-[12px] font-normal">{data.date}</p>
+            </div>
+            <span className="w-full block h-px bg-[#EFEFEF]"></span>
         </li>
     )
 }

components/dashboard/userAccount/tabs/comments/index.js

@@ -2,7 +2,7 @@ import Comment from "./Comment"
 
 function Comments({ user }) {
     return (
-        <ul className="flex flex-col items-start justify-start">
+        <ul className="flex opacity-page flex-col items-start justify-start gap-[20px]">
             {user.comments.map((item, idx) => (
                 <Comment
                     key={idx}

components/dashboard/userAccount/tabs/comments/modal/index.js

@@ -0,0 +1,67 @@
+import { useState } from 'react';
+import TrashOrangeD from '@/components/icons/TrashOrangeD';
+import { Box, Button, Modal } from '@mui/material';
+import { styleDefault } from '@/mui';
+import CloseModalD from '@/components/icons/CloseModalD';
+
+function ModalDeleteComment() {
+
+    const [open, setOpen] = useState(false);
+    const handleOpen = () => setOpen(true);
+    const handleClose = () => setOpen(false);
+
+    return (
+        <div>
+            {/* Button Modal */}
+            <Button
+                className="!gap-[5px] !p-1 !text-[#F17732] !text-[14px] !font-medium"
+                onClick={handleOpen}
+                variant="text"
+            >
+                <TrashOrangeD />
+                حذف نظر
+            </Button>
+            {/* Content Modal */}
+            <Modal
+                open={open}
+                onClose={handleClose}
+            >
+                <Box
+                    sx={styleDefault}
+                    className="!w-full md:!w-fit md:!min-w-[552px] !py-[20px] !px-[24px]"
+                >
+                    <div className='flex items-center justify-between w-full'>
+                        <p className='text-[#3B3B3B] text-[20px] font-medium'>حذف نظر</p>
+                        <Button
+                            onClick={handleClose}
+                            className='!p-1'
+                            variant='text'
+                        >
+                            <CloseModalD />
+                        </Button>
+                    </div>
+                    <span className='block h-px w-full bg-[#EFEFEF] my-[16px]'></span>
+                    <p className='text-[#525252] text-[16px] font-normal'>آیا این نظر حذف شود؟</p>
+                    <div className='flex items-center justify-end gap-[16px]'>
+                        <Button
+                            variant='outlined'
+                            onClick={handleClose}
+                            className='!py-[8px] !px-[16px] !rounded-[4px] !border-[#828DE0] !text-[#828DE0] !text-[16px] !font-medium'
+                        >
+                            انصراف
+                        </Button>
+                        <Button
+                            variant='contained'
+                            onClick={handleClose}
+                            className='!py-[8px] !px-[16px] !rounded-[4px] !text-[#EFEFEF] !text-[16px] !font-medium'
+                        >
+                            حذف نظر
+                        </Button>
+                    </div>
+                </Box>
+            </Modal>
+        </div>
+    )
+}
+
+export default ModalDeleteComment