settings

jackwellerreal · Nov 16, 2024 · 88aa4ac · 88aa4ac
1 parent 576febd
commit 88aa4ac
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 7 deletions.
diff --git 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
@@ -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;
 }