Adding a Markdown Editor page

Adding a page that allow me to view how the Markdown syntax would be rendered to before submitting it in the backend

react-frontend/src/Portfolio/index.tsx

@@ -12,6 +12,7 @@ import {
 } from "react-router-dom";
 import { PortfolioPathes } from '../Types';
 import { css } from '@emotion/react';
+import MarkdownEditor from '../containers/MarkdownEditor';
 
 const About = lazy(() => import('../containers/About'));
 const Skills = lazy(() => import('../containers/Skills'));
@@ -20,14 +21,18 @@ const Experience = lazy(() => import('../containers/Experience'));
 const Projects = lazy(() => import('../containers/Projects'));
 
 type PathElementRoutes = Record<PortfolioPathes, JSX.Element>
+type TestingRoutes = {
+    "markdown": JSX.Element
+}
 
-const pathElementRoutes: PathElementRoutes = {
+const pathElementRoutes: PathElementRoutes & TestingRoutes = {
     "": <About />,
     "skills": <Skills />,
     "education": <Education />,
     "experience": <Experience />,
     "projects": <Projects />,
-    "contacts": <Contacts />
+    "contacts": <Contacts />,
+    "markdown": <MarkdownEditor />
 }
 
 export default function Portfolio() {

react-frontend/src/containers/MarkdownEditor/index.tsx

@@ -0,0 +1,41 @@
+import React, { useState } from 'react';
+import HTMLMarkdown from '../../components/HTMLMarkdown';
+import ContainerWrap from '../../components/ContainerWrap';
+
+const MarkdownEditor = () => {
+    const [markdown, setMarkdown] = useState<string>('');
+
+    const handleMarkdownChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
+        setMarkdown(event.target.value);
+    };
+
+    return (
+        <div style={{ display: 'grid' }}>
+            <textarea
+                style={{
+                    flex: 1,
+                    minHeight: '150px',
+                    padding: '15px',
+                    fontSize: '16px',
+                    resize: 'vertical',
+                    border: '1px solid #ccc',
+                    borderRadius: '8px',
+                    boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)',
+                    outline: 'none',
+                    fontFamily: 'Arial, sans-serif',
+                    lineHeight: '1.5',
+                    marginBottom: '20px',
+                    transition: 'border-color 0.3s, box-shadow 0.3s',
+                }}
+                value={markdown}
+                onChange={handleMarkdownChange}
+                placeholder="Write your Markdown here..."
+            />
+            <div style={{ flex: 1, padding: '10px', borderTop: '1px solid #ccc' }}>
+                <HTMLMarkdown markdown={markdown} />
+            </div>
+        </div>
+    );
+};
+
+export default ContainerWrap(MarkdownEditor);