added header

This commit is contained in:
Ebube
2023-05-01 12:33:27 +01:00
parent 9ef2084956
commit 87d1615b73
3 changed files with 15 additions and 8 deletions
+1 -2
View File
@@ -36,7 +36,6 @@ export default function Hero({ className }) {
let loginDate = userDetails?.last_login.split(' ')[0] let loginDate = userDetails?.last_login.split(' ')[0]
let {firstname, lastname, email, profile_pic} = userDetails let {firstname, lastname, email, profile_pic} = userDetails
let userEmail = email.split('@')[0] let userEmail = email.split('@')[0]
console.log(userEmail)
return ( return (
<div <div
@@ -62,7 +61,7 @@ export default function Hero({ className }) {
{/* user */} {/* user */}
<div className="flex items-center space-x-3"> <div className="flex items-center space-x-3">
<div className="w-14 h-14 flex justify-center items-center rounded-full overflow-hidden"> <div className="w-14 h-14 flex justify-center items-center rounded-full overflow-hidden">
<img src={profile_pic == '' ? profile_pic : heroUser} alt="" /> <img src={profile_pic != '' ? profile_pic : heroUser} alt="" />
</div> </div>
<div> <div>
<p className="text-xl tracking-wide font-bold antise text-white"> <p className="text-xl tracking-wide font-bold antise text-white">
+11 -3
View File
@@ -15,6 +15,7 @@ import usersService from "../../services/UsersService";
import siteLogo from '../../assets/images/wrenchboard.png' import siteLogo from '../../assets/images/wrenchboard.png'
import Flag from '../../assets/images/united-states.svg' import Flag from '../../assets/images/united-states.svg'
import { useSelector } from "react-redux";
export default function Header({ logoutModalHandler, sidebarHandler }) { export default function Header({ logoutModalHandler, sidebarHandler }) {
@@ -24,6 +25,8 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
const [moneyPopup, setPopup] = useToggle(false); const [moneyPopup, setPopup] = useToggle(false);
const [toggleNotification, setToggleNotification] = useToggle(false) const [toggleNotification, setToggleNotification] = useToggle(false)
const darkMode = useContext(DarkModeContext); const darkMode = useContext(DarkModeContext);
const {userDetails} = useSelector((state) => state?.userDetails)
const [myWalletList, setMyWalletList] = useState([]); const [myWalletList, setMyWalletList] = useState([]);
const api = new usersService(); const api = new usersService();
@@ -87,6 +90,11 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
const setNotification = ()=> { const setNotification = ()=> {
setToggleNotification.toggle() setToggleNotification.toggle()
} }
// User Profile
let {firstname, lastname, email, profile_pic} = userDetails
let userEmail = email.split('@')[0]
return ( return (
<> <>
<div className="header-wrapper backdrop-blur-sm bg-[#efedfe5e]/60 dark:bg-transparent w-full h-full flex items-center xl:px-0 md:px-10 px-5"> <div className="header-wrapper backdrop-blur-sm bg-[#efedfe5e]/60 dark:bg-transparent w-full h-full flex items-center xl:px-0 md:px-10 px-5">
@@ -463,17 +471,17 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
{/* profile-image */} {/* profile-image */}
<div className="lg:w-[62px] lg:h-[62px] w-[50px] h-[50px] rounded-full overflow-hidden"> <div className="lg:w-[62px] lg:h-[62px] w-[50px] h-[50px] rounded-full overflow-hidden">
<img <img
src={profileImg} src={profile_pic != '' ? profile_pic : profileImg}
alt="profile" alt="profile"
className="w-full h-full" className="w-full h-full"
/> />
</div> </div>
<div className="lg:block hidden"> <div className="lg:block hidden">
<h1 className="text-xl font-bold text-dark-gray dark:text-white"> <h1 className="text-xl font-bold text-dark-gray dark:text-white">
Brokln Simons {`${firstname} ${lastname}`}
</h1> </h1>
<p className="text-sm text-thin-light-gray"> <p className="text-sm text-thin-light-gray">
@broklinslam_75 @{userEmail}
</p> </p>
</div> </div>
</div> </div>
+3 -3
View File
@@ -22,9 +22,9 @@ export default function Layout({ children }) {
const logOut = () => { const logOut = () => {
localStorage.removeItem("email"); localStorage.removeItem("email");
localStorage.clear(); localStorage.clear();
toast.success("Come Back Soon", { // toast.success("Come Back Soon", {
icon: `🙂`, // icon: `🙂`,
}); // });
navigate("/login", { replace: true }); navigate("/login", { replace: true });
}; };