show profile informations

Author: Gimleux

src/components/pages/profile/Profile.tsx

@@ -1,15 +1,37 @@
-import React, {Props, ReactElement, useState} from "react";
-import {Container} from "react-bootstrap";
-import {genitiveOfWord} from "../../../background/methods/grammar/germanGrammar";
-import {SystemState} from "../../../background/redux/actions/sytemState";
+import React, {ReactElement} from "react";
+import {Container, Row, Button} from "react-bootstrap";
 
-export default function Profile() : ReactElement {
+export default function Profile(): ReactElement {
+    const user = {
+        name: "Gimleux",
+        groups: ["FAMILY", "ADMIN"]
+    };
 
     return (
-        <Container>
-            <h2>
-                Profile
-            </h2>
+        <Container className="page-content">
+            <Container fluid>
+                <Row className="title-action mt-1">
+                    <h1 className="mr-1 h4">
+                        My Profile
+                    </h1>
+                    <Button>Edit Informations</Button>
+                </Row>
+            </Container>
+
+            <Container className="profile-information-display p-0">
+                <h2 className="h3 pt-3 pb-3">
+                    {user.name}
+                </h2>
+                <dl>
+                    <dt>Username</dt>
+                    <dd>{user.name}</dd>
+                    <dt>Groups</dt>
+                    <dd>{user.groups.map((group: string) => {
+                        return group + " "
+                    })}
+                    </dd>
+                </dl>
+            </Container>
         </Container>
     );
 }

src/style/helpers.scss

@@ -2,6 +2,39 @@
   text-shadow: none;
 }
 
+.title-action {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.page-content {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  height: 100%;
+}
+
+.profile-information-display dl{
+  display: flex;
+  flex-wrap: wrap;
+  padding: 20px 0;
+}
+
+.profile-information-display dl dt {
+  width: 25%;
+}
+
+.profile-information-display dl dd {
+  width: 75%;
+}
+
+.profile-information-display dl dt, .profile-information-display dl dd {
+  margin: 0;
+  padding: 0.75rem;
+  border-bottom: 1px solid $secondary;
+}
+
 .queer-banner{
   color:white;
   border-top: 5px solid $primary;