Frontend checkpoint

1 files changed, 61 insertions, 0 deletions

diff --git a/frontend/src/components/ConnectionContent.js b/frontend/src/components/ConnectionContent.js
new file mode 100644
index 0000000..061282c
--- /dev/null
+++ b/frontend/src/components/ConnectionContent.js
@@ -0,0 +1,61 @@
+import React, {Component} from 'react';
+import './ConnectionContent.scss';
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+import {
+
+} from '@fortawesome/free-solid-svg-icons'
+import {useParams} from "react-router-dom";
+import { Dropdown } from 'react-bootstrap';
+
+class ConnectionContent extends Component {
+    render() {
+        let content = this.props.connectionPayload
+
+        console.log(content)
+
+        if (content === undefined) {
+            return <div>nope</div>
+        }
+
+        let payload = content.map(c =>
+            <span key={c.id} className={c.from_client ? "from-client" : "from-server"} title="cccccc">
+                {c.content}
+
+            </span>
+        )
+
+
+
+
+        return (
+            <div className="connection-content">
+                <div className="connection-content-options">
+                    <Dropdown>
+                        <Dropdown.Toggle variant="success" id="dropdown-basic">
+                            format
+                        </Dropdown.Toggle>
+
+                        <Dropdown.Menu>
+                            <Dropdown.Item href="#/action-1">plain</Dropdown.Item>
+                            <Dropdown.Item href="#/action-2">hex</Dropdown.Item>
+                            <Dropdown.Item href="#/action-3">hexdump</Dropdown.Item>
+                            <Dropdown.Item href="#/action-3">base32</Dropdown.Item>
+                            <Dropdown.Item href="#/action-3">base64</Dropdown.Item>
+                            <Dropdown.Item href="#/action-3">ascii</Dropdown.Item>
+                        </Dropdown.Menu>
+                    </Dropdown>
+
+
+                </div>
+
+                <pre>{payload}</pre>
+
+
+            </div>
+        );
+    }
+
+}
+
+
+export default ConnectionContent;