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>
     )
 }