From 88aa4ac72693616a454023e2cdb960993e088d71 Mon Sep 17 00:00:00 2001
From: Jack Weller <97435840+jackwellerreal@users.noreply.github.com>
Date: Sat, 16 Nov 2024 14:32:28 +1000
Subject: [PATCH] settings

---
 src/components/settingscontent/index.jsx      | 38 +++++++++++++++----
 .../settingscontent.module.css                | 33 ++++++++++++++++
 2 files changed, 64 insertions(+), 7 deletions(-)

diff --git a/src/components/settingscontent/index.jsx b/src/components/settingscontent/index.jsx
index fa16e2a..e434393 100644
--- a/src/components/settingscontent/index.jsx
+++ b/src/components/settingscontent/index.jsx
@@ -34,19 +34,43 @@ export function SettingsContent() {
     useEffect(() => {
         getUserInfo();
     }, []);
-    
+
     return (
         <div className={styles["settings"]}>
             <div className={styles["settings-sidebar"]}>
                 <div className={styles["settings-sidebar-items"]}>
-                <div className={styles["settings-sidebar-title"]}>User Settings</div>
-                <div className={styles["settings-sidebar-item"]}>My Account</div>
-                <div className={styles["settings-sidebar-item"]}>Security</div></div>
+                    <div className={styles["settings-sidebar-title"]}>
+                        User Settings
+                    </div>
+                    <div className={styles["settings-sidebar-item"]}>
+                        My Account
+                    </div>
+                    <div className={styles["settings-sidebar-item"]}>
+                        Security
+                    </div>
+                </div>
             </div>
             <div className={styles["settings-main"]}>
-                <h1>Settings</h1>
-                <p>Coming soon!</p>
-                <button>This is a button</button>
+                <div className={styles["settings-main-card"]}>
+                    <div className={styles["settings-main-card-title"]}>
+                        {currentUser ? (
+                            <ProfilePicture
+                                name={currentUser.profile.displayname}
+                                color={currentUser.profile.color}
+                            />
+                        ) : null}
+                        <h1>
+                            @{currentUser ? currentUser.account.username : null}
+                        </h1>
+                    </div>
+                    <div className={styles["settings-main-card-content"]}>
+                        <div className={styles["settings-main-card-item"]}>
+                            {currentUser
+                                ? currentUser.profile.displayname
+                                : null}
+                        </div>
+                    </div>
+                </div>
             </div>
         </div>
     );
diff --git a/src/components/settingscontent/settingscontent.module.css b/src/components/settingscontent/settingscontent.module.css
index c39e33d..f77e0d8 100644
--- a/src/components/settingscontent/settingscontent.module.css
+++ b/src/components/settingscontent/settingscontent.module.css
@@ -47,4 +47,37 @@
 
 .settings-main {
     padding: 60px 40px 80px;
+}
+
+.settings-main-card {
+    width: 660px;
+    padding: 16px;
+    border-radius: 8px;
+    background-color: #1e1f22;
+}
+
+.settings-main-card img {
+    width: 80px;
+    aspect-ratio: 1;
+}
+
+.settings-main-card-title {
+    display: flex;
+    align-items: center;
+    gap: 24px;
+}
+
+.settings-main-card-title h1 {
+    height: fit-content;
+    font-size: 20px;
+    font-weight: 600;
+}
+
+
+.settings-main-card-content {
+    width: 100%;
+    padding: 16px;
+    border-radius: 8px;
+    background-color: #2b2d31;
+    margin-top: 8px;
 }
\ No newline at end of file