feat: Show user info in setting.

Author: zouhir96

src/components/Layout/SettingsLayout/SettingsLayout.tsx

@@ -1,8 +1,22 @@
 import React from 'react'
 import 'react-contexify/dist/ReactContexify.css'
 import { NavLink, Outlet } from 'react-router-dom'
+import { auth } from '../../../features/auth/api/Config'
 import './settings.css'
 
+const UserInfo = () => {
+  const userInfo = auth.currentUser
+  return (
+    <div className="userCard">
+      {userInfo?.photoURL && <img src={userInfo.photoURL} className="userImage"></img>}
+      <div className="userInfos">
+        <div className="userName">{userInfo?.displayName}</div>
+        <div className="userEmail">{userInfo?.email}</div>
+      </div>
+    </div>
+  )
+}
+
 export const SettingsLayout = () => {
   const navigation = [
     {
@@ -28,6 +42,7 @@ export const SettingsLayout = () => {
   ]
   return (
     <div className="settings">
+      <UserInfo />
       <div className="horizontalTabsLayout">
         <nav className="navigation">
           {navigation.map((item) => {

src/components/Layout/SettingsLayout/settings.css

@@ -40,6 +40,32 @@
   border-right: 4px solid var(--horizontal-tabs-layout-active-color);
   font-weight: bold;
 }
+.userCard {
+  width: auto;
+  background-color: var(--placeholder-background-color);
+  padding: 10px;
+  margin: 10px;
+  border-radius: 20px;
+  display: flex;
+  align-items: center;
+}
+.userImage {
+  width: 60px;
+  height: 60px;
+  border-radius: 20%;
+}
+.userInfos {
+  width: auto;
+  margin-left: 10px;
+}
+.userName {
+  font-size: larger;
+  font-weight: 600;
+}
+.userEmail {
+  font-size: medium;
+  margin-top: 6px;
+}
 
 @media only screen and (max-width: 768px) {
   .horizontalTabsLayout {