Rename props
This commit is contained in:
parent
1452ed0d63
commit
4807c835da
|
@ -2,29 +2,29 @@ import React from "react";
|
||||||
|
|
||||||
type PercentageGaugeProps = {
|
type PercentageGaugeProps = {
|
||||||
perc: number;
|
perc: number;
|
||||||
bgFull: string;
|
bgColor: string;
|
||||||
bgPerc: string;
|
bgColorPerc: string;
|
||||||
textPerc: string;
|
textColor: string;
|
||||||
};
|
};
|
||||||
|
|
||||||
const PercentageGauge: React.FC<PercentageGaugeProps> = ({
|
const PercentageGauge: React.FC<PercentageGaugeProps> = ({
|
||||||
perc,
|
perc,
|
||||||
bgFull,
|
bgColor,
|
||||||
bgPerc,
|
bgColorPerc,
|
||||||
textPerc,
|
textColor,
|
||||||
}) => (
|
}) => (
|
||||||
<div className="w-60 h-6 border-l-2 border-gray-400 relative">
|
<div className="w-60 h-6 border-l-2 border-gray-400 relative">
|
||||||
<div className="flex absolute w-full h-full">
|
<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>
|
||||||
<div className="flex absolute w-full h-full">
|
<div className="flex absolute w-full h-full">
|
||||||
<div
|
<div
|
||||||
className={`my-auto h-5 rounded-r-lg ${bgPerc}`}
|
className={`my-auto h-5 rounded-r-lg ${bgColorPerc}`}
|
||||||
style={{ width: `${perc}%` }}
|
style={{ width: `${perc}%` }}
|
||||||
></div>
|
></div>
|
||||||
</div>
|
</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>
|
<span className="m-auto">{perc}%</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -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">
|
<div className="grid grid-cols-2 gap-x-2 gap-y-1 items-center text-sm">
|
||||||
<PercentageGauge
|
<PercentageGauge
|
||||||
perc={burntPerc}
|
perc={burntPerc}
|
||||||
bgFull="bg-orange-100"
|
bgColor="bg-orange-100"
|
||||||
bgPerc="bg-orange-500"
|
bgColorPerc="bg-orange-500"
|
||||||
textPerc="text-orange-800"
|
textColor="text-orange-800"
|
||||||
/>
|
/>
|
||||||
<div className="flex items-baseline space-x-1">
|
<div className="flex items-baseline space-x-1">
|
||||||
<span className="flex space-x-1 text-orange-500">
|
<span className="flex space-x-1 text-orange-500">
|
||||||
|
@ -40,9 +40,9 @@ const RewardSplit: React.FC<RewardSplitProps> = ({ txData }) => {
|
||||||
</div>
|
</div>
|
||||||
<PercentageGauge
|
<PercentageGauge
|
||||||
perc={100 - burntPerc}
|
perc={100 - burntPerc}
|
||||||
bgFull="bg-yellow-100"
|
bgColor="bg-yellow-100"
|
||||||
bgPerc="bg-yellow-300"
|
bgColorPerc="bg-yellow-300"
|
||||||
textPerc="text-yellow-700"
|
textColor="text-yellow-700"
|
||||||
/>
|
/>
|
||||||
<div className="flex items-baseline space-x-1">
|
<div className="flex items-baseline space-x-1">
|
||||||
<span className="flex space-x-1">
|
<span className="flex space-x-1">
|
||||||
|
|
Loading…
Reference in New Issue