2 files changed, 41 insertions, 0 deletions
diff --git a/public/projects/react-small-apps/apps/todos/src/views/Account/Account.js b/public/projects/react-small-apps/apps/todos/src/views/Account/Account.js
new file mode 100644
index 0000000..85aab6b
--- /dev/null
+++ b/public/projects/react-small-apps/apps/todos/src/views/Account/Account.js
@@ -0,0 +1,26 @@
+import { useSelector } from "react-redux";
+import { Link } from "react-router-dom";
+import "./Account.scss";
+
+function Account() {
+  const currentUser = useSelector((state) => state.auth.currentUser);
+
+  return (
+    <div>
+      <Link to="/">Back to your todo list</Link>
+      <h2>Account</h2>
+      <dl className="account-details">
+        <dt className="account-details__headings">Username</dt>
+        <dd className="account-details__data">{currentUser.username}</dd>
+        <dt className="account-details__headings">Email</dt>
+        <dd className="account-details__data">{currentUser.email}</dd>
+        <dt className="account-details__headings">Creation date</dt>
+        <dd className="account-details__data">
+          {new Date(currentUser.createdAt).toLocaleDateString()}
+        </dd>
+      </dl>
+    </div>
+  );
+}
+
+export default Account;
diff --git a/public/projects/react-small-apps/apps/todos/src/views/Account/Account.scss b/public/projects/react-small-apps/apps/todos/src/views/Account/Account.scss
new file mode 100644
index 0000000..a8b2ba7
--- /dev/null
+++ b/public/projects/react-small-apps/apps/todos/src/views/Account/Account.scss
@@ -0,0 +1,15 @@
+.account-details {
+  display: grid;
+  grid-template-columns: max-content minmax(0, 1fr);
+  row-gap: 0.5rem;
+  column-gap: 1rem;
+
+  &__headings {
+    grid-column: 1;
+    font-weight: 600;
+  }
+
+  &__data {
+    grid-column: 2;
+  }
+}