WrenchBoard/Users-Wrench
3
0
Fork 0
Code Issues Pull Requests Releases Activity

.

Browse Source
This commit is contained in:
Chukwumdiebube Ojinta
2023-07-18 19:47:23 +01:00
parent 9007463f6d
commit 1ffb732bfa
7 changed files with 222 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Partials/Header.jsx
+13 -86
View File
@@ -1,4 +1,4 @@
import React, { useContext, useState, useEffect } from "react";
import React, { useContext, useEffect, useState } from "react";
import { Link, useLocation } from "react-router-dom";
import bank1 from "../../assets/images/bank-1.png";
import bank2 from "../../assets/images/bank-2.png";
@@ -6,16 +6,15 @@ import bank3 from "../../assets/images/bank-3.png";
import bank4 from "../../assets/images/bank-4.png";
import profileImg from "../../assets/images/profile-pic.jpg";
import useToggle from "../../hooks/useToggle";
import usersService from "../../services/UsersService";
import DarkModeContext from "../Contexts/DarkModeContext";
import Icons from "../Helpers/Icons";
import ModalCom from "../Helpers/ModalCom";
import SearchCom from "../Helpers/SearchCom";
import WalletHeader from "../MyWallet/WalletHeader";
import usersService from "../../services/UsersService";
import siteLogo from "../../assets/images/wrenchboard.png";
import Flag from "../../assets/images/united-states.svg";
import { useSelector } from "react-redux";
import Flag from "../../assets/images/united-states.svg";
import siteLogo from "../../assets/images/wrenchboard.png";
export default function Header({ logoutModalHandler, sidebarHandler }) {
const [balanceDropdown, setbalanceValue] = useToggle(false);
@@ -489,7 +488,9 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
<h1 className="text-xl font-bold text-dark-gray dark:text-white">
{firstname}
</h1>
{userDetails && userDetails?.account_type !== "FAMILY" && <p className="text-sm text-thin-light-gray">@{userEmail}</p>}
{userDetails && userDetails?.account_type !== "FAMILY" && (
<p className="text-sm text-thin-light-gray">@{userEmail}</p>
)}
</div>
</div>
@@ -499,7 +500,11 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
onClick={() => handlerProfile()}
className="lg:w-[62px] lg:h-[62px] w-[50px] h-[50px] rounded-full overflow-hidden block"
>
<img src={profileImg} alt="profile" className="w-full h-full" />
<img
src={profileImg}
alt="profile"
className="w-full h-full"
/>
</div>
</div>
@@ -513,7 +518,7 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
</div>
<div className="heading border-b dark:border-[#5356fb29] border-light-purple px-7 py-2">
<h3 className="text-xl font-bold text-dark-gray dark:text-white">
{`${firstname} ${lastname}`}
{`${firstname} ${lastname}`}
</h3>
</div>
<div className="content">
@@ -540,84 +545,6 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
</li>
{userDetails && userDetails?.account_type !== "FAMILY" && (
<>
<li className="content-item relative my-2 hover:bg-slate-100 transition duration-500 rounded-lg">
<Link to="#" className="notifications">
<div className="name">
<p className="flex items-center justify-between text-sm py-2 px-4 text-dark-gray dark:text-white hover:text-sky-blue transition font-medium">
<span>Reports</span> <span>&gt;</span>
</p>
</div>
</Link>
{/* report list items*/}
<div
className="inner-list-items absolute rounded-lg"
onClick={setNotification}
>
<ul className="p-3">
<li className="content-item my-1 hover:bg-slate-100 transition duration-500 rounded-lg">
<Link to="/referral" className="notifications">
<div className="name">
<p className="text-sm py-1 px-4 text-dark-gray dark:text-white hover:text-sky-blue transition font-medium">
Referrals
</p>
</div>
</Link>
</li>
<li className="content-item my-1 hover:bg-slate-100 transition duration-500 rounded-lg">
<Link to="#" className="notifications">
<div className="name">
<p className="text-sm py-1 px-4 text-dark-gray dark:text-white hover:text-sky-blue transition font-medium">
Billing
</p>
</div>
</Link>
</li>
<li className="content-item my-1 hover:bg-slate-100 transition duration-500 rounded-lg">
<Link to="#" className="notifications">
<div className="name">
<p className="text-sm py-1 px-4 text-dark-gray dark:text-white hover:text-sky-blue transition font-medium">
Payments
</p>
</div>
</Link>
</li>
<li className="content-item my-1 hover:bg-slate-100 transition duration-500 rounded-lg">
<Link to="#" className="notifications">
<div className="name">
<p className="text-sm py-1 px-4 text-dark-gray dark:text-white hover:text-sky-blue transition font-medium">
Completed Jobs
</p>
</div>
</Link>
</li>
<li className="content-item my-1 hover:bg-slate-100 transition duration-500 rounded-lg">
<Link to="#" className="notifications">
<div className="name">
<p className="text-sm py-1 px-4 text-dark-gray dark:text-white hover:text-sky-blue transition font-medium">
Previous Task
</p>
</div>
</Link>
</li>
</ul>
<hr />
<div className="px-7 py-3 cursor-pointer flex items-center">
<div
className={`h-6 w-8 mr-1 p-1 ${
toggleNotification
? "bg-sky-blue flex justify-end items-center"
: "bg-slate-200"
} rounded-full transition`}
>
<div className="w-4 h-full bg-white rounded-full"></div>
</div>
<p className="text-sm py-2 px-4 text-slate-400 dark:text-white">
Notifications
</p>
</div>
</div>
{/* end report list items*/}
</li>
<li className="content-item my-2 hover:bg-slate-100 transition duration-500 rounded-lg">
<Link to="#" className="notifications">
<div className="name">