push rasad front on new repo

src/features/messages/components/messages-recivers/MessagesRecivers.js

@@ -0,0 +1,89 @@
+import React from "react";
+
+import { PropTypes } from "prop-types";
+
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+
+import { Accordion, Chip, Divider, Typography } from "@mui/material";
+
+import AccordionSummary from "@mui/material/AccordionSummary";
+import AccordionDetails from "@mui/material/AccordionDetails";
+import { Grid } from "../../../../components/grid/Grid";
+import { SPACING } from "../../../../data/spacing";
+import { formatJustDate, formatJustTime } from "../../../../utils/formatTime";
+
+const MessagesRecivers = ({
+  heading,
+  message,
+  linkText,
+  link,
+  image,
+  time,
+  number,
+}) => {
+  return (
+    <Accordion>
+      <AccordionSummary
+        expandIcon={<ExpandMoreIcon />}
+        aria-controls="panel1a-content"
+        id="panel1a-header"
+      >
+        <Typography>
+          {heading ? number + 1 + " - " + heading : number + 1 + " بدون عنوان "}
+        </Typography>
+      </AccordionSummary>
+      <AccordionDetails>
+        <Typography color="primary" textAlign="justify">
+          {message ? message : "برای این پیغام توضیحی نوشته نشده است"}
+          <hr />
+          <Typography mt={SPACING.SMALL} textAlign="justify">
+            تاریخ ثبت پیام: {formatJustDate(time)} - ساعت {formatJustTime(time)}
+          </Typography>
+        </Typography>
+      </AccordionDetails>
+      {linkText && (
+        <>
+          <Divider textAlign="left">
+            <Chip label="پیوند" />
+          </Divider>
+
+          <AccordionDetails>
+            <a style={{ textDecoration: "none" }} href={link}>
+              {linkText}
+            </a>
+          </AccordionDetails>
+        </>
+      )}
+
+      {image?.length ? (
+        <Divider textAlign="left">
+          <Chip label="تصاویر" />
+        </Divider>
+      ) : (
+        ""
+      )}
+
+      {image?.length
+        ? image.map((item, i) => {
+            return [
+              <Grid key={i} display="inline-block" p={SPACING.SMALL}>
+                <a key={`SlaughterPaymentFactorImage`} href={item}>
+                  <img src={item} alt="Slaughter Payment Factor" width="100" />
+                </a>
+              </Grid>,
+            ];
+          })
+        : ""}
+    </Accordion>
+  );
+};
+MessagesRecivers.propTypes = {
+  message: PropTypes.string,
+  heading: PropTypes.string,
+  link: PropTypes.string,
+  linkText: PropTypes.string,
+  image: PropTypes.any,
+  time: PropTypes.string,
+  number: PropTypes.any,
+};
+export default MessagesRecivers;

src/features/messages/components/messages-senders/MessagesSenders.js

@@ -0,0 +1,103 @@
+import React, { useState } from "react";
+import { PropTypes } from "prop-types";
+import {
+  List,
+  ListItem,
+  ListItemText,
+  Divider,
+  Typography,
+  Chip,
+  Button,
+  Collapse,
+} from "@mui/material";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import ExpandLessIcon from "@mui/icons-material/ExpandLess";
+import { formatJustDate, formatJustTime } from "../../../../utils/formatTime";
+
+const MessagesSenders = ({
+  heading,
+  message,
+  linkText,
+  link,
+  image,
+  time,
+  number,
+}) => {
+  const [isMessageVisible, setMessageVisible] = useState(false);
+
+  const toggleMessageVisibility = () => {
+    setMessageVisible(!isMessageVisible);
+  };
+
+  return (
+    <List>
+      <ListItem>
+        <ListItemText
+          primary={
+            heading ? `${number + 1} - ${heading}` : `${number + 1} بدون عنوان`
+          }
+        />
+        <Button variant="text" onClick={toggleMessageVisibility}>
+          {isMessageVisible ? <ExpandLessIcon /> : <ExpandMoreIcon />}
+        </Button>
+      </ListItem>
+
+      <Collapse in={isMessageVisible}>
+        <ListItem>
+          <Typography color="primary" textAlign="justify">
+            {message ? message : "برای این پیام توضیحی نوشته نشده است"}
+          </Typography>
+        </ListItem>
+      </Collapse>
+
+      <ListItem>
+        <Typography fontSize={13} color={"red"} mt={1} textAlign="justify">
+          تاریخ ثبت پیام: {formatJustDate(time)} - ساعت {formatJustTime(time)}
+        </Typography>
+      </ListItem>
+
+      {linkText && (
+        <>
+          <ListItem>
+            <Chip label="پیوند" />
+          </ListItem>
+
+          <ListItem>
+            <a style={{ textDecoration: "none" }} href={link}>
+              {linkText}
+            </a>
+          </ListItem>
+        </>
+      )}
+
+      <Divider />
+
+      {image && image.length > 0 && (
+        <div>
+          <ListItem>
+            <Chip label="تصاویر" />
+          </ListItem>
+          {image.map((item, i) => (
+            <ListItem key={i}>
+              <a href={item} style={{ textDecoration: "none" }}>
+                <img src={item} alt="Slaughter Payment Factor" width="100" />
+              </a>
+            </ListItem>
+          ))}
+        </div>
+      )}
+    </List>
+  );
+};
+
+MessagesSenders.propTypes = {
+  message: PropTypes.string,
+  heading: PropTypes.string,
+  link: PropTypes.string,
+  linkText: PropTypes.string,
+  image: PropTypes.array,
+  time: PropTypes.string,
+  number: PropTypes.number,
+};
+
+export default MessagesSenders;