start question details

frontOf5thYearProject/src/components/Patinet Screens/QuestionDetails/QuestionComments/QuestionComments.jsx

@@ -0,0 +1,73 @@
+import { Typography, Box, Avatar, Stack } from "@mui/material";
+import { useState } from "react";
+
+export default function QuestionComments() {
+  const [comments, setComments] = useState([
+    { id: 1, comment: "hello", name: undefined, profile: "" },
+    { id: 2, comment: "hi", name: "أحمد", profile: "" },
+    { id: 3, comment: "yes iam here", name: "براء", profile: "" },
+    { id: 4, comment: "no i am not here", name: "أحمد", profile: "" },
+  ]);
+
+  return (
+    <Box p={4}>
+      {comments.map((element) => {
+        return (
+          <Comment
+            key={element.id}
+            Comment={element.comment}
+            CommenterName={element.name}
+            profile={element.profile}
+          />
+        );
+      })}
+    </Box>
+  );
+}
+
+// eslint-disable-next-line react/prop-types
+function Comment({ Comment, CommenterName, profile }) {
+  if (CommenterName == undefined) {
+    return (
+      <Stack direction="row" gap={2} sx={{ direction: "ltr" }}>
+        <Avatar src={profile} />
+        <Box sx={{
+            borderRadius: "5px",
+            backgroundColor: "var(--primary)",
+            color: "white",
+            display:'inline',
+            padding:'10px 15px'
+          }}>
+        <Typography
+          variant="string"
+        >
+          {Comment}
+        </Typography>
+
+        </Box>
+      </Stack>
+    );
+  }
+  return (
+    <Box m={1} mb={3}>
+      <Stack direction="row" gap={2}>
+        <Avatar src={profile} />
+        <Typography variant="subtitle1"> {CommenterName}</Typography>
+      </Stack>
+      <Box m={1} mr={7} sx={{
+            borderRadius: "5px",
+            backgroundColor: "var(--primary)",
+            color: "white",
+            display:'inline',
+            padding:'5px 15px'
+          }}>
+        <Typography
+
+          variant="string"
+        >
+          {Comment}
+        </Typography>
+      </Box>
+    </Box>
+  );
+}

frontOf5thYearProject/src/components/Patinet Screens/QuestionDetails/QuestionDetails.module.css

@@ -0,0 +1,26 @@
+.container{
+    width: 60%;
+    height: auto;
+    border-radius: 20px;
+    margin:5% auto;
+}
+.container > div:first-child{
+    background-image: linear-gradient(to left, #68C1C2, #F3F2F2 100%);
+    border: 2px solid #000;
+    border-radius: 20px;
+    padding: 20px;
+    text-align: center;
+    color:#787878;
+}
+.container > div:nth-child(2){
+    margin-top:20px;
+    margin-bottom:20px;
+    width: 100%;
+}
+.container > div:nth-child(2) > img{
+    width: 100%;
+}
+.container >div:nth-child(3){
+    background-color: white;
+    border-radius: 10px;
+}

frontOf5thYearProject/src/main.jsx

@@ -19,6 +19,7 @@ import getTokenFromLocalStorage from "./functions/getTokenFromLocalStorage.js";
 import getData from "./functions/getData.jsx";
 import FindADoctor from "./pages/Patient Screens/FindADoctor.jsx";
 import InfoOfDoctor from "./pages/Patient Screens/InfoOfDoctor.jsx";
+import QuestionDetails from "./pages/Patient Screens/QuestionDetails.jsx";
 
 
 //import data function 
@@ -43,7 +44,8 @@ const router = createBrowserRouter([
       },
       { path: "/editProfile", element: <EditProfile /> },
       { path: '/find_doctor', element: <FindADoctor /> , loader:getSpecializationAndCounters},
-      { path: '/doctoer_details', element: <InfoOfDoctor />}
+      { path: '/doctoer_details', element: <InfoOfDoctor />},
+      { path: '/question_details', element: <QuestionDetails />}
     ],
   },
   {

frontOf5thYearProject/src/pages/Patient Screens/QuestionDetails.jsx

@@ -0,0 +1,21 @@
+import {Box, Typography} from '@mui/material'
+import classes from '../../components/Patinet Screens/QuestionDetails/QuestionDetails.module.css'
+import QuestionComments from '../../components/Patinet Screens/QuestionDetails/QuestionComments/QuestionComments'
+import image from '../../assets/image/contact.png'
+export default function QuestionDetails() {
+  return (
+    <Box className={classes.container}>
+        <Box >
+            <Typography >
+                هنا السؤال 
+            </Typography>
+        </Box>
+        <Box>
+            <img src={image} alt="" />
+        </Box> 
+        <Box>
+            <QuestionComments />
+        </Box>
+    </Box>
+  )
+}