Updated general progress

This commit is contained in:
2025-09-17 15:39:30 +02:00
parent 48f4b24c81
commit f0346fce4e

View File

@@ -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}