Updated general progress
This commit is contained in:
@@ -27,12 +27,14 @@ type GenericProgressNoTooltipProps = {
|
|||||||
export function GenericProgressNoTooltip({ text, percent, className }: GenericProgressNoTooltipProps) {
|
export function GenericProgressNoTooltip({ text, percent, className }: GenericProgressNoTooltipProps) {
|
||||||
return (
|
return (
|
||||||
<div className="flex flex-1">
|
<div className="flex flex-1">
|
||||||
|
{percent > 0 && (
|
||||||
<div
|
<div
|
||||||
className={cn("h-5 rounded-l-md flex items-center justify-center", percent >= 100 ? "rounded-r-md" : undefined, className)}
|
className={cn("h-5 rounded-l-md flex items-center justify-center", percent >= 100 ? "rounded-r-md" : undefined, className)}
|
||||||
style={{ width: `${percent > 100 ? 100 : percent}%` }}
|
style={{ width: `${percent > 100 ? 100 : percent}%` }}
|
||||||
>
|
>
|
||||||
{text}
|
{text}
|
||||||
</div>
|
</div>
|
||||||
|
)}
|
||||||
{percent < 100 && (
|
{percent < 100 && (
|
||||||
<div
|
<div
|
||||||
className={cn("flex-1 h-5 rounded-r-md bg-background", percent === 0 ? "rounded-l-md" : undefined)}
|
className={cn("flex-1 h-5 rounded-r-md bg-background", percent === 0 ? "rounded-l-md" : undefined)}
|
||||||
@@ -69,6 +71,7 @@ export function GenericProgress({ percent, tooltipId, tooltipContent, className,
|
|||||||
data-tooltip-content={tooltipContent}
|
data-tooltip-content={tooltipContent}
|
||||||
className="flex flex-1"
|
className="flex flex-1"
|
||||||
>
|
>
|
||||||
|
{percent > 0 && (
|
||||||
<div
|
<div
|
||||||
data-id={tooltipId}
|
data-id={tooltipId}
|
||||||
className={cn("h-5 rounded-l-md", percent >= 100 ? "rounded-r-md" : undefined, className)}
|
className={cn("h-5 rounded-l-md", percent >= 100 ? "rounded-r-md" : undefined, className)}
|
||||||
@@ -78,6 +81,7 @@ export function GenericProgress({ percent, tooltipId, tooltipContent, className,
|
|||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
|
)}
|
||||||
{percent < 100 && (
|
{percent < 100 && (
|
||||||
<div
|
<div
|
||||||
data-id={tooltipId}
|
data-id={tooltipId}
|
||||||
@@ -98,12 +102,14 @@ export function GenericProgress({ percent, tooltipId, tooltipContent, className,
|
|||||||
data-tooltip-content={tooltipContent}
|
data-tooltip-content={tooltipContent}
|
||||||
className="flex flex-1"
|
className="flex flex-1"
|
||||||
>
|
>
|
||||||
|
{percent > 0 && (
|
||||||
<div
|
<div
|
||||||
data-id={tooltipId}
|
data-id={tooltipId}
|
||||||
className={cn("h-5 rounded-l-md", percent >= 100 ? "rounded-r-md" : undefined, className)}
|
className={cn("h-5 rounded-l-md", percent >= 100 ? "rounded-r-md" : undefined, className)}
|
||||||
style={{ width: `${percent > 100 ? 100 : percent}%` }}
|
style={{ width: `${percent > 100 ? 100 : percent}%` }}
|
||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
|
)}
|
||||||
{percent < 100 && (
|
{percent < 100 && (
|
||||||
<div
|
<div
|
||||||
data-id={tooltipId}
|
data-id={tooltipId}
|
||||||
|
|||||||
Reference in New Issue
Block a user