Rename props

This commit is contained in:
Willian Mitsuda 2021-08-08 02:36:26 -03:00
parent 1452ed0d63
commit 4807c835da
2 changed files with 15 additions and 15 deletions

View File

@ -2,29 +2,29 @@ import React from "react";
type PercentageGaugeProps = {
perc: number;
bgFull: string;
bgPerc: string;
textPerc: string;
bgColor: string;
bgColorPerc: string;
textColor: string;
};
const PercentageGauge: React.FC<PercentageGaugeProps> = ({
perc,
bgFull,
bgPerc,
textPerc,
bgColor,
bgColorPerc,
textColor,
}) => (
<div className="w-60 h-6 border-l-2 border-gray-400 relative">
<div className="flex absolute w-full h-full">
<div className={`my-auto h-5 rounded-r-lg w-full ${bgFull}`}></div>
<div className={`my-auto h-5 rounded-r-lg w-full ${bgColor}`}></div>
</div>
<div className="flex absolute w-full h-full">
<div
className={`my-auto h-5 rounded-r-lg ${bgPerc}`}
className={`my-auto h-5 rounded-r-lg ${bgColorPerc}`}
style={{ width: `${perc}%` }}
></div>
</div>
<div
className={`flex absolute w-full h-full mix-blend-multiply text-sans ${textPerc}`}
className={`flex absolute w-full h-full mix-blend-multiply text-sans ${textColor}`}
>
<span className="m-auto">{perc}%</span>
</div>

View File

@ -21,9 +21,9 @@ const RewardSplit: React.FC<RewardSplitProps> = ({ txData }) => {
<div className="grid grid-cols-2 gap-x-2 gap-y-1 items-center text-sm">
<PercentageGauge
perc={burntPerc}
bgFull="bg-orange-100"
bgPerc="bg-orange-500"
textPerc="text-orange-800"
bgColor="bg-orange-100"
bgColorPerc="bg-orange-500"
textColor="text-orange-800"
/>
<div className="flex items-baseline space-x-1">
<span className="flex space-x-1 text-orange-500">
@ -40,9 +40,9 @@ const RewardSplit: React.FC<RewardSplitProps> = ({ txData }) => {
</div>
<PercentageGauge
perc={100 - burntPerc}
bgFull="bg-yellow-100"
bgPerc="bg-yellow-300"
textPerc="text-yellow-700"
bgColor="bg-yellow-100"
bgColorPerc="bg-yellow-300"
textColor="text-yellow-700"
/>
<div className="flex items-baseline space-x-1">
<span className="flex space-x-1">