projects/hypixel-stats
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Updated general progress

Browse Source
This commit is contained in:
Taken
2025-09-17 15:39:30 +02:00
parent 48f4b24c81
commit f0346fce4e
1 changed files with 27 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
src/app/(stats)/player/[ign]/_components/GenericProgress.tsx
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">
<div {percent > 0 && (
className={cn("h-5 rounded-l-md flex items-center justify-center", percent >= 100 ? "rounded-r-md" : undefined, className)} <div
style={{ width: `${percent > 100 ? 100 : percent}%` }} 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}%` }}
{text} >
</div> {text}
</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,15 +71,17 @@ export function GenericProgress({ percent, tooltipId, tooltipContent, className,
data-tooltip-content={tooltipContent} data-tooltip-content={tooltipContent}
className="flex flex-1" className="flex flex-1"
> >
<div {percent > 0 && (
data-id={tooltipId} <div
className={cn("h-5 rounded-l-md", percent >= 100 ? "rounded-r-md" : undefined, className)} data-id={tooltipId}
style={{ className={cn("h-5 rounded-l-md", percent >= 100 ? "rounded-r-md" : undefined, className)}
width: `${percent > 100 ? 100 : percent}%`, style={{
background: "repeating-linear-gradient(to right,#f55,#fa0,#ff5,#5f5,#5ff,#f5f,#a0a,#f55 16rem)" width: `${percent > 100 ? 100 : percent}%`,
}} background: "repeating-linear-gradient(to right,#f55,#fa0,#ff5,#5f5,#5ff,#f5f,#a0a,#f55 16rem)"
> }}
</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"
> >
<div {percent > 0 && (
data-id={tooltipId} <div
className={cn("h-5 rounded-l-md", percent >= 100 ? "rounded-r-md" : undefined, className)} data-id={tooltipId}
style={{ width: `${percent > 100 ? 100 : percent}%` }} className={cn("h-5 rounded-l-md", percent >= 100 ? "rounded-r-md" : undefined, className)}
> style={{ width: `${percent > 100 ? 100 : percent}%` }}
</div> >
</div>
)}
{percent < 100 && ( {percent < 100 && (
<div <div
data-id={tooltipId} data-id={tooltipId}