ObjectComponent presentation

2 files changed, 43 insertions, 17 deletions

diff --git a/src/components/ObjectComponent.js b/src/components/ObjectComponent.js
index 0622e22..d00c150 100644
--- a/src/components/ObjectComponent.js
+++ b/src/components/ObjectComponent.js
@@ -1,19 +1,51 @@
 import React from "react";
 
+import Card from "@mui/material/Card";
+
 class ObjectComponent extends React.Component {
     render() {
-        let { user_presentation, ...rest } = this.props;
+        let {
+            _id,
+            _rev,
+            document_version,
+            user_presentation,
+            ip,
+            port,
+            whois_description,
+            asn,
+            asn_country_code,
+            ...rest
+        } = this.props;
         return (
-            <div className="object">
-                <div className="header">
-                    <a href={`/${this.props._id}`}>#{this.props._id}</a>
+            <Card className="object" variant="outlined">
+                <div className="id">
+                    <a href={`/${_id}`}>#{_id}</a>
                 </div>
-                <GenericTable data={rest} />
+                <table>
+                    <tbody>
+                        <tr>
+                            <td>Address</td>
+                            <td>{`${ip}:${port}`}</td>
+                        </tr>
+                        <tr>
+                            <td>Owner</td>
+                            <td>{whois_description}</td>
+                        </tr>
+                        <tr>
+                            <td>ASN</td>
+                            <td>{`${asn} (${asn_country_code})`}</td>
+                        </tr>
+                    </tbody>
+                </table>
+
+                {/* TODO */}
+                {/* <GenericTable data={rest} /> */}
+
                 <UserPresentation
                     description={user_presentation.description}
                     data={user_presentation.data}
                 />
-            </div>
+            </Card>
         );
     }
 }
@@ -38,7 +70,7 @@ function GenericTable(props) {
 function UserPresentation(props) {
     return (
         <div className="user-presentation">
-            <div className="header">Scanner-unique data</div>
+            <hr />
             {props.description && (
                 <div className="description">{props.description}</div>
             )}
diff --git a/src/styles/main.css b/src/styles/main.css
index d0c0c18..794b217 100644
--- a/src/styles/main.css
+++ b/src/styles/main.css
@@ -37,8 +37,6 @@ body {
 
 /* Object */
 .object {
-    border: 1px solid black;
-    border-radius: 25px;
     padding: 2em;
     margin: 1em;
     width: 40em;
@@ -54,8 +52,9 @@ body {
     background-color: red;
 }
 
-.object .header {
-    font-size: 2em;
+.object .id {
+    float: right;
+    font-family: monospace;
 }
 
 .object td {
@@ -66,13 +65,8 @@ body {
     margin-top: 2em;
 }
 
-.object .user-presentation .header {
-    font-weight: bold;
-    font-size: 1.5em;
-    margin-bottom: 0.5em;
-}
-
 .object > .user-presentation > .description {
+    margin-top: 2em;
     font-style: italic;
     margin-bottom: 1em;
 }