add edit label and original comment modal

src/components/modals/OriginalCommentModal.jsx

@@ -0,0 +1,64 @@
+import React, {useState, useEffect} from "react";
+import { StyledModal } from '../styled/modals/ReplyModal.styled';
+import useGeneralStore from "../../hooks/stores/useGeneralStore";
+import Modal from "react-modal";
+import Draggable from "react-draggable";
+import getDate from "../../utils/getDate";
+
+
+const OriginalCommentModal = ({ isOpen, closeModal, comment }) => {
+  const {
+    selectedStyle,
+  } = useGeneralStore(state => state);
+
+  const [isMobile, setIsMobile] = useState(window.innerWidth <= 480);
+  const nodeRef = React.useRef(null);
+  const originalCommentContent = comment.original?.content;
+  const timestamp = getDate(comment.timestamp);
+
+
+  useEffect(() => {
+    const handleResize = () => setIsMobile(window.innerWidth <= 480);
+    window.addEventListener('resize', handleResize);
+
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, [setIsMobile]);
+
+
+  return (
+    <StyledModal
+      isOpen={isOpen}
+      onRequestClose={closeModal}
+      contentLabel="Original Comment"
+      shouldCloseOnEsc={false}
+      shouldCloseOnOverlayClick={isMobile}
+      selectedStyle={selectedStyle}
+      style={isMobile ? ({ overlay: { backgroundColor: "rgba(0,0,0,.25)" }}) : ({ overlay: { backgroundColor: "rgba(0,0,0,0)" }})}>
+      <Draggable handle=".modal-header" nodeRef={nodeRef} disabled={isMobile}>
+        <div className="modal-content" ref={nodeRef}>
+          <div className="modal-header">
+            Original at {timestamp}
+            <button className="icon" onClick={() => closeModal()} title="close" />
+          </div>
+          <div id="form">
+            <div className="textarea-wrapper">
+              <textarea className="textarea"
+                rows="4"
+                style={{ paddingTop: '0' }}
+                placeholder="Comment"
+                defaultValue={originalCommentContent}
+                wrap="soft"
+                readOnly={true} />
+            </div>
+          </div>
+        </div>
+      </Draggable>
+    </StyledModal>
+  );
+};
+
+Modal.setAppElement('#root');
+
+export default OriginalCommentModal;