mirror of
https://github.com/Sagit-chu/flvx.git
synced 2026-10-06 01:56:37 +08:00
66de566a00
* fix(frontend): left-align announcement logo in homepage banner * fix(frontend): keep multiselect panels floating and preserve summaries * fix(frontend): rebalance config card header spacing * fix(frontend): normalize formatting and fix multiselect modal behavior * fix(frontend): restore config divider spacing on desktop
64 lines
1.4 KiB
TypeScript
64 lines
1.4 KiB
TypeScript
import * as React from "react";
|
|
|
|
import { Progress as BaseProgress } from "@/components/ui/progress";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
type ProgressColor =
|
|
| "default"
|
|
| "primary"
|
|
| "secondary"
|
|
| "success"
|
|
| "warning"
|
|
| "danger";
|
|
|
|
export interface ProgressProps {
|
|
"aria-label"?: string;
|
|
className?: string;
|
|
color?: ProgressColor;
|
|
label?: React.ReactNode;
|
|
showValueLabel?: boolean;
|
|
size?: "sm" | "md" | "lg";
|
|
value?: number;
|
|
}
|
|
|
|
function indicatorClassName(color: ProgressColor) {
|
|
if (color === "danger") {
|
|
return "bg-danger";
|
|
}
|
|
if (color === "success") {
|
|
return "bg-success";
|
|
}
|
|
if (color === "warning") {
|
|
return "bg-warning";
|
|
}
|
|
|
|
return "bg-primary";
|
|
}
|
|
|
|
export function Progress({
|
|
"aria-label": ariaLabel,
|
|
className,
|
|
color = "primary",
|
|
label,
|
|
showValueLabel,
|
|
size = "md",
|
|
value = 0,
|
|
}: ProgressProps) {
|
|
return (
|
|
<div className={cn("w-full space-y-1", className)}>
|
|
{label || showValueLabel ? (
|
|
<div className="flex items-center justify-between text-xs text-default-500">
|
|
<span>{label}</span>
|
|
{showValueLabel ? <span>{Math.round(value)}%</span> : null}
|
|
</div>
|
|
) : null}
|
|
<BaseProgress
|
|
aria-label={ariaLabel}
|
|
className={cn(size === "sm" ? "h-1.5" : "", size === "lg" ? "h-3" : "")}
|
|
indicatorClassName={indicatorClassName(color)}
|
|
value={value}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|