General/ReactWrenchStarter
1
0
Fork 0
Code Issues Pull Requests Releases Activity

notification parts

Browse Source
This commit is contained in:
Olu Amey
2023-01-25 19:54:23 -05:00
parent 1618d70419
commit 8c201feec6
2 changed files with 2 additions and 136 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/Routers.jsx
+1
View File
@@ -61,6 +61,7 @@ export default function Routers() {
<Route exact path="/calendar" element={<CalendarPage />} />
<Route exact path="/resources" element={<ResourcePage />} />
<Route exact path="/my-wallet" element={<MyWalletPage />} />
<Route exact path="/notification" element={<Notification />} />
<Route
exact
path="/my-collection/collection-item"
src/components/Partials/Header.jsx
+1 -136
View File
@@ -192,142 +192,7 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
</div>
</button>
{/* balance */}
<div className="lg:flex hidden user-balance cursor-pointer lg:w-[252px] w-[150px] h-[48px] items-center rounded-full relative bg-purple pr-1.5 pl-4">
<div
onClick={() => handlerBalance()}
className="flex items-center lg:justify-between justify-center w-full h-full"
>
<span className="lg:block hidden">
<Icons name="wallet" />
</span>
<p className="lg:text-xl text-lg font-bold text-white">
$ 234,435.34
</p>
<span className="lg:block hidden">
<Icons name="deep-plus" />
</span>
</div>
<div
className={`balance-dropdown w-96 z-30 bg-white dark:bg-dark-white absolute -left-24 rounded-lg cursor-pointer ${
balanceDropdown ? "active" : ""
}`}
>
<div className="heading border-b dark:border-[#5356fb29] border-light-purple px-7 py-6">
<h3 className="text-xl font-bold text-dark-gray dark:text-white">
Your Balance
</h3>
</div>
<div className="content px-7 pb-7">
<ul>
<li className="content-item py-4 border-b dark:border-[#5356fb29] border-light-purple hover:border-purple dark:hover:border-purple">
<div className="sm:flex justify-between items-center">
<div className="account-name flex space-x-4 items-center mb-2 sm:mb-0">
<div className="icon w-14 h-14 transition duration-300 ease-in-out rounded-full flex justify-center items-center bg-light-purple dark:bg-dark-light-purple ">
<img src={bank1} alt="" />
</div>
<div className="name">
<p className="text-base text-dark-gray dark:text-white font-medium">
MetaMask
</p>
</div>
</div>
<div>
<p className="eth text-xl font-bold text-purple">
75,320 ETH
</p>
<p className="usd text-base text-thin-light-gray text-right">
(773.69 USD)
</p>
</div>
</div>
</li>
<li className="content-item py-4 border-b dark:border-[#5356fb29] border-light-purple hover:border-purple dark:hover:border-purple">
<div className="sm:flex justify-between items-center">
<div className="account-name flex space-x-4 items-center mb-2 sm:mb-0">
<div className="icon w-14 h-14 transition duration-300 ease-in-out rounded-full flex justify-center items-center bg-light-purple dark:bg-dark-light-purple ">
<img src={bank2} alt="" />
</div>
<div className="name">
<p className="text-base text-dark-gray dark:text-white font-medium">
Coinbase Wallet
</p>
</div>
</div>
<div>
<p className="eth text-xl font-bold text-purple">
56,124 ETH
</p>
<p className="usd text-base text-thin-light-gray text-right">
(773.69 USD)
</p>
</div>
</div>
</li>
<li className="content-item py-4 border-b dark:border-[#5356fb29] border-light-purple hover:border-purple dark:hover:border-purple">
<div className="sm:flex justify-between items-center">
<div className="account-name flex space-x-4 items-center mb-2 sm:mb-0">
<div className="icon w-14 h-14 transition duration-300 ease-in-out rounded-full flex justify-center items-center bg-light-purple dark:bg-dark-light-purple ">
<img src={bank3} alt="" />
</div>
<div className="name">
<p className="text-base text-dark-gray dark:text-white font-medium">
Bitski
</p>
</div>
</div>
<div>
<p className="eth text-xl font-bold text-purple">
99,123 ETH
</p>
<p className="usd text-base text-thin-light-gray text-right">
(773.69 USD)
</p>
</div>
</div>
</li>
<li className="content-item py-5">
<div className="sm:flex justify-between items-center">
<div className="account-name flex space-x-4 items-center mb-2 sm:mb-0">
<div className="icon w-14 h-14 transition duration-300 ease-in-out rounded-full flex justify-center items-center bg-light-purple dark:bg-dark-light-purple ">
<img src={bank4} alt="" />
</div>
<div className="name">
<p className="text-base text-dark-gray dark:text-white font-medium">
WalletConnect
</p>
</div>
</div>
<div>
<p className="eth text-xl font-bold text-purple">
43,728 ETH
</p>
<p className="usd text-base text-thin-light-gray text-right">
(773.69 USD)
</p>
</div>
</div>
</li>
</ul>
<div className="add-money-btn flex justify-center items-center">
<button
onClick={() => addMoneyHandler()}
type="button"
className="w-[122px] h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
>
Add Money
</button>
</div>
</div>
</div>
</div>
<div className="lg:hidden flex user-balance cursor-pointer lg:w-[252px] w-[150px] h-[48px] items-center rounded-full relative bg-purple">
<div className="flex items-center lg:justify-between justify-center w-full h-full">
<p className="lg:text-xl text-lg font-bold text-white">
$ 234,435.34
</p>
</div>
</div>
<div className="lg:hidden block"></div>
{/* notification */}
<div className="user-notification lg:block hidden relative">
<div