LaconicNetwork/mars-v2-frontend
3
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

progressbar initial implementation

Browse Source
This commit is contained in:
Gustavo Mauricio 2022-09-14 17:47:52 +01:00
parent 89f3295536
commit cd08b567fb
2 changed files with 52 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
components/Navigation.tsx
View File

@ -5,6 +5,7 @@ import { Popover } from "@headlessui/react";
import { ChevronDownIcon } from "@heroicons/react/24/solid";
import SearchInput from "components/SearchInput";
import ProgressBar from "components/ProgressBar";
import Wallet from "./Wallet";
const mockedAccounts = [
@ -58,7 +59,7 @@ const Navigation = () => {
<Wallet />
</div>
{/* Sub navigation bar */}
<div className="flex justify-between px-6 py-3 text-sm text-white/40">
<div className="flex justify-between px-6 py-3 text-sm text-white/40 border-b border-white/20">
<div className="flex items-center">
<SearchInput />
{mockedAccounts.map((account, index) => (
@ -102,8 +103,14 @@ const Navigation = () => {
</div>
<div className="flex gap-4 items-center">
<p>$: 2500</p>
<div>Lvg Gauge</div>
<div>Risk Gauge</div>
<div>Lvg</div>
<div>Risk</div>
<ProgressBar value={0.43} />
<div className="flex justify-center w-16">
<svg width="14" height="13" viewBox="0 0 14 13" fill="currentColor">
<path d="M0.234863 6.57567C0.234863 7.07288 0.581403 7.41188 1.08615 7.41188H8.04708L9.62912 7.33655L7.45194 9.31785L5.93771 10.8547C5.77951 11.0129 5.68157 11.2163 5.68157 11.4574C5.68157 11.9244 6.02811 12.2634 6.50272 12.2634C6.72872 12.2634 6.93213 12.173 7.12047 11.9922L11.859 7.20094C11.9871 7.07288 12.0775 6.92221 12.1152 6.74894V11.5478C12.1152 12.0148 12.4692 12.3538 12.9363 12.3538C13.4109 12.3538 13.765 12.0148 13.765 11.5478V1.6111C13.765 1.14403 13.4109 0.797485 12.9363 0.797485C12.4692 0.797485 12.1152 1.14403 12.1152 1.6111V6.39486C12.0775 6.22913 11.9871 6.07846 11.859 5.95039L7.12047 1.15156C6.93213 0.970755 6.72872 0.880354 6.50272 0.880354C6.02811 0.880354 5.68157 1.22689 5.68157 1.68644C5.68157 1.92751 5.77951 2.13845 5.93771 2.28911L7.45194 3.83348L9.62912 5.80725L8.04708 5.73192H1.08615C0.581403 5.73192 0.234863 6.07846 0.234863 6.57567Z" />
</svg>
</div>
</div>
</div>
</div>

42
components/ProgressBar.tsx Normal file
View File

@ -0,0 +1,42 @@
import React, { useEffect, useState } from "react";
import { ArrowRightIcon } from "@heroicons/react/24/solid";
type Props = {
value: number;
};
const ProgressBar = ({ value }: Props) => {
const percentageValue = `${(value * 100).toFixed(0)}%`;
const [newValue, setNewValue] = useState(0.77);
useEffect(() => {
setInterval(() => {
// randomizing value between value and 1
setNewValue(Math.random() * (1 - value) + value);
}, 3000);
}, [value]);
console.log(newValue);
const percentageNewValue = `${(newValue * 100).toFixed(0)}%`;
return (
<div className="relative w-[130px] h-4 bg-black rounded-full z-0">
<div
className="absolute bg-green-500 h-4 rounded-full z-10"
style={{ width: percentageValue }}
/>
<div
className="absolute bg-red-500 h-4 rounded-full transition-[width] duration-500"
style={{ width: percentageNewValue }}
/>
<div className="absolute w-full text-xs font-medium text-white flex justify-center items-center gap-x-2 z-20">
{percentageValue}
<ArrowRightIcon className="h-3 w-3" />
{percentageNewValue}
</div>
</div>
);
};
export default ProgressBar;