Initial commit

src/Components/System.js

@@ -0,0 +1,43 @@
+import React, { useState, useEffect } from 'react';
+import  * as BS from 'react-bootstrap'
+
+import { FaAddressCard } from "react-icons/fa";
+import defaultAvatar from '../default_discord_avatar.png'
+
+export default function System(props) {
+
+    const { toHTML } = require('discord-markdown');
+
+    const [ desc, setDesc ] = useState("");
+    const user = JSON.parse(localStorage.getItem("user"));
+
+    useEffect(() => {
+    if (user.description) {
+        setDesc(toHTML(user.description));
+    } else setDesc("(no description)");
+}, [user.description]);
+
+        return (
+           <BS.Card className="mb-3 mt-3 w-100" >
+               <BS.Card.Header className="d-flex align-items-center justify-content-between">
+                  <BS.Card.Title className="float-left"><FaAddressCard className="mr-3" /> {user.name}</BS.Card.Title> 
+                  { user.avatar_url ? <BS.Image src={`${user.avatar_url}`} style={{width: 50, height: 50}} className="float-right" roundedCircle /> : 
+               <BS.Image src={defaultAvatar} style={{width: 50, height: 50}} className="float-right" roundedCircle />}
+               </BS.Card.Header>
+               <BS.Card.Body>
+               <BS.Row>
+                    <BS.Col xs={12} md={4}><b>ID:</b> {user.id}</BS.Col>
+                    <BS.Col xs={12} md={4}><b>Tag:</b> {user.tag}</BS.Col>
+                    <BS.Col xs={12} md={4}><b>Timezone:</b> {user.tz}</BS.Col>
+                </BS.Row>
+                <br/>
+                <p><b>Description:</b></p>
+                <p dangerouslySetInnerHTML={{__html: desc}}></p>
+                </BS.Card.Body>
+           </BS.Card>
+        )
+}
+
+   
+
+