feat: Accounts Tab (#50)

* feat: added data for accounts tab

* feat: fixed PR comments

frontend/src/tabs/Account.css

@@ -0,0 +1,64 @@
+.Account__flex {
+  display: flex;
+  margin: 8px 4px;
+}
+
+.Account__flex--center {
+  align-items: center;
+}
+
+.Account__wrap {
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.Account__list {
+  padding-left: 20px;
+  list-style-type: none;
+}
+
+.Account__list li {
+  margin-bottom: 10px;
+  text-indent: -8px;
+}
+
+.Account__list li:before {
+  content: "-";
+  text-indent: -8px;
+}
+
+.Account__input {
+  width: 100%;
+  padding: 6px 10px;
+}
+
+.Account__input:focus {
+  border: 1px solid black;
+  outline: black;
+}
+
+.Account__button {
+  background-color: black;
+  color: #efefef;
+  border: 1px solid black;
+  text-transform: uppercase;
+  cursor: pointer;
+  border-radius: 6px;
+}
+
+.Account__button--edit {
+  padding: 2px 8px;
+  font-size: 8px;
+}
+
+.Account__button--submit {
+  padding: 8px 16px;
+  font-size: 10px;
+}
+
+.Account__user {
+  display: flex;
+  gap: 10px;
+  justify-content: space-between;
+  width: 100%;
+}

frontend/src/tabs/Account.js

@@ -1,13 +1,81 @@
-import React from 'react'
-import './Account.css';
-import BasicTab from './BasicTab.js';
+import React, { useState, useEffect } from "react";
+import "./Account.css";
+import BasicTab from "./BasicTab.js";
 
-const Account = props => {
+const Account = (props) => {
   // TODO: Create the account tab w/ wallet address, username, pixel info, top X % users ( pixels placed? ), ...
+  const [username, setUsername] = useState("");
+  const [pixelCount, setPixelCount] = useState(2572);
+  const [accountRank, setAccountRank] = useState("");
+  const [isUsernameSaved, saveUsername] = useState(false);
+
+  const handleSubmit = (event) => {
+    event.preventDefault();
+    setUsername(username);
+    saveUsername(true);
+  };
+
+  const editUsername = (e) => {
+    saveUsername(false);
+  }
+
+  useEffect(() => {
+    if (pixelCount >= 5000) {
+      setAccountRank("Champion");
+    } else if (pixelCount >= 3000) {
+      setAccountRank("Platinum");
+    } else if (pixelCount >= 2000) {
+      setAccountRank("Gold");
+    } else if (pixelCount >= 1000) {
+      setAccountRank("Silver");
+    } else {
+      setAccountRank("Bronze");
+    }
+  });
   return (
     <BasicTab title="Account">
+      <div className="Account__flex">
+        <p>Address:</p>
+        <p className="Account__wrap">
+          0x0000000000000000000000000000000000000000000000000000000000000000
+        </p>
+      </div>
+      <div className="Account__flex Account__flex--center">
+        <p>Username:</p>
+        {isUsernameSaved ? (
+          <div className="Account__user">
+            <p>{username}</p>
+            <button className="Account__button Account__button--edit" type="button" onClick={editUsername}>
+              edit
+            </button>
+          </div>
+        ) : (
+          <form className="Account__user" onSubmit={handleSubmit}>
+            <label>
+              <input
+                className="Account__input"
+                type="text"
+                value={username}
+                required
+                onChange={(e) => setUsername(e.target.value)}
+              />
+            </label>
+            <button className="Account__button Account__button--submit" type="submit">
+              update
+            </button>
+          </form>
+        )}
+      </div>
+      <div className="Account__flex">
+        <p>Pixel count:</p>
+        <p>{pixelCount}</p>
+      </div>
+      <div className="Account__flex">
+        <p>Current Rank:</p>
+        <p>{accountRank}</p>
+      </div>
     </BasicTab>
   );
-}
+};
 
 export default Account;