Olu Amey
117 lines
3.6 KiB
React
117 lines
3.6 KiB
React
import React, { useState } from "react";
|
|
import background from "../../assets/images/shape/balance-bg.svg";
|
|
|
|
export default function CurrentBalanceWidget() {
|
|
const [eth] = useState(90);
|
|
const [btc] = useState(85);
|
|
const [ltc] = useState(20);
|
|
return (
|
|
<div
|
|
className="current-balance-widget w-full h-full rounded-2xl overflow-hidden flex flex-col justify-between px-8 py-9"
|
|
style={{
|
|
background: `url(${background}) 0% 0% / cover no-repeat`,
|
|
}}
|
|
>
|
|
<div className="wallet flex justify-between">
|
|
<div className="w-[100px] h-[100px] rounded-full bg-[#485199] flex justify-center items-center">
|
|
<div>
|
|
<p className="text-26 font-bold text-white tracking-wide text-center">
|
|
04
|
|
</p>
|
|
<p className="text-lg text-white tracking-wide text-center">
|
|
Wallets
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<p className="text-26 font-bold tracking-wide text-white text-right">
|
|
6,572.00
|
|
</p>
|
|
<p className="tracking-wide text-white text-lg opacity-[70%]">
|
|
Total Transactions
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="balance">
|
|
<p className="text-lg text-white opacity-[70%] tracking-wide mb-6">
|
|
Current Balance
|
|
</p>
|
|
<p className="text-[44px] font-bold text-white tracking-wide leading-10 mb-2">
|
|
$94734.00
|
|
</p>
|
|
<p className="text-lg text-white tracking-wide">
|
|
+324.75 <span className="text-light-green">(11.5%)</span>
|
|
</p>
|
|
</div>
|
|
<div className="counters flex space-x-16">
|
|
<div className="circle-count">
|
|
<div>
|
|
<div className="percent">
|
|
<svg>
|
|
<circle cx="37" cy="37" r="30"></circle>
|
|
<circle
|
|
cx="37"
|
|
cy="37"
|
|
r="30"
|
|
style={{ "--percent": `${eth}` }}
|
|
></circle>
|
|
</svg>
|
|
<div className="number">
|
|
<h3>
|
|
{eth}
|
|
<span>%</span>
|
|
</h3>
|
|
</div>
|
|
</div>
|
|
<p className="text-18 text-white text-center">2.32 ETH</p>
|
|
</div>
|
|
</div>
|
|
<div className="circle-count">
|
|
<div>
|
|
<div className="percent">
|
|
<svg>
|
|
<circle cx="37" cy="37" r="30"></circle>
|
|
<circle
|
|
cx="37"
|
|
cy="37"
|
|
r="30"
|
|
style={{ "--percent": `${btc}` }}
|
|
></circle>
|
|
</svg>
|
|
<div className="number">
|
|
<h3>
|
|
{btc}
|
|
<span>%</span>
|
|
</h3>
|
|
</div>
|
|
</div>
|
|
<p className="font-18 text-white text-center">1.76 BTC</p>
|
|
</div>
|
|
</div>
|
|
<div className="circle-count">
|
|
<div>
|
|
<div className="percent">
|
|
<svg>
|
|
<circle cx="37" cy="37" r="30"></circle>
|
|
<circle
|
|
cx="37"
|
|
cy="37"
|
|
r="30"
|
|
style={{ "--percent": `${ltc}` }}
|
|
></circle>
|
|
</svg>
|
|
<div className="number">
|
|
<h3>
|
|
{ltc}
|
|
<span>%</span>
|
|
</h3>
|
|
</div>
|
|
</div>
|
|
<p className="text-18 text-white text-center">2.32 LTC</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|