From e6231f86b4c047e823d6c695a67a94c8481525fc Mon Sep 17 00:00:00 2001
From: Nikolai Petukhov <n.petukhov@innopolis.university>
Date: Sat, 28 Sep 2024 10:34:06 +0300
Subject: [PATCH] account page is done

---
 src/components/account/AccountButtons.jsx | 17 +++++++++++++
 src/components/account/ActionButton.jsx   | 11 +++++++++
 src/components/account/index.css          | 29 +++++++++++++++++++++++
 src/components/index.css                  |  1 +
 src/pages/Account.jsx                     | 17 ++++++++++++-
 src/pages/css/account.css                 | 12 ++++++++++
 src/pages/index.css                       |  3 ++-
 7 files changed, 88 insertions(+), 2 deletions(-)
 create mode 100644 src/components/account/AccountButtons.jsx
 create mode 100644 src/components/account/ActionButton.jsx
 create mode 100644 src/components/account/index.css

diff --git a/src/components/account/AccountButtons.jsx b/src/components/account/AccountButtons.jsx
new file mode 100644
index 0000000..057a39a
--- /dev/null
+++ b/src/components/account/AccountButtons.jsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import { URLs } from "../../__data__/urls";
+import ActionButton from "./ActionButton.jsx";
+
+const AccountButtons = (props) => {
+  return (
+      <div className="account-buttons">
+          <ActionButton title={"Exit"} action={props.exitHandler}/>
+          <ActionButton title={"Change Name"} action={props.changeNameHandler}/>
+          <ActionButton title={"Change Pass"} action={props.changePassHandler}/>
+
+          <a className="MyButton mclaren-regular" href={URLs.home.url}>Back</a>
+      </div>
+  );
+};
+
+export default AccountButtons;
diff --git a/src/components/account/ActionButton.jsx b/src/components/account/ActionButton.jsx
new file mode 100644
index 0000000..347b5a7
--- /dev/null
+++ b/src/components/account/ActionButton.jsx
@@ -0,0 +1,11 @@
+import React from 'react';
+
+const ActionButton = (props) => {
+  return (
+      <a className="MyButton mclaren-regular" onClick={() => {
+          props.action()
+      }}>{props.title}</a>
+  );
+};
+
+export default ActionButton;
diff --git a/src/components/account/index.css b/src/components/account/index.css
new file mode 100644
index 0000000..24a314b
--- /dev/null
+++ b/src/components/account/index.css
@@ -0,0 +1,29 @@
+.account-buttons {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+.account-buttons a {
+    display: flex;
+
+    font-size: 1.5vw;
+    transition: color 0.2s ease-in;
+
+    width: 20vw;
+
+    margin-top: 2vw;
+}
+
+.account-buttons a:hover {
+    color: black;
+}
+
+@media only screen and (max-width: 800px) {
+    .account-buttons a {
+        font-size: 2.5vh;
+        width: 60vw;
+        margin-top: 3vh;
+    }
+}
diff --git a/src/components/index.css b/src/components/index.css
index 5a72ae3..f6ebe61 100644
--- a/src/components/index.css
+++ b/src/components/index.css
@@ -1,6 +1,7 @@
 @import url("reg/index.css");
 @import url("init/index.css");
 @import url("home/index.css");
+@import url("account/index.css");
 
 .MyButton {
     text-decoration: none;
diff --git a/src/pages/Account.jsx b/src/pages/Account.jsx
index 2b76274..6a9e154 100644
--- a/src/pages/Account.jsx
+++ b/src/pages/Account.jsx
@@ -1,7 +1,22 @@
 import React from "react";
+import AccountButtons from "../components/account/AccountButtons.jsx";
+import userIcon from "../../images/user.svg";
 
 const Account = () => {
-  return <h1>Account</h1>;
+  const exitHandler = () => {}
+  const changeNameHandler = () => {}
+  const changePassHandler = () => {}
+
+  return (
+      <div className="account-items">
+        <img src={userIcon} alt="user" />
+        <AccountButtons
+            exitHandler={exitHandler}
+            changeNameHandler={changeNameHandler}
+            changePassHandler={changePassHandler}
+        />
+      </div>
+  );
 };
 
 export default Account;
diff --git a/src/pages/css/account.css b/src/pages/css/account.css
index e69de29..8cf9602 100644
--- a/src/pages/css/account.css
+++ b/src/pages/css/account.css
@@ -0,0 +1,12 @@
+.account-items {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    margin-top: 5vw;
+}
+
+.account-items img {
+    margin-bottom: 1vw;
+}
diff --git a/src/pages/index.css b/src/pages/index.css
index aeabed2..8aa63b0 100644
--- a/src/pages/index.css
+++ b/src/pages/index.css
@@ -1,3 +1,4 @@
 @import url("css/init.css");
 @import url("css/home.css");
-@import url("css/input.css");
\ No newline at end of file
+@import url("css/input.css");
+@import url("css/account.css");
\ No newline at end of file