Files
flvx/vite-frontend/src/shadcn-bridge/heroui/progress.tsx
T

58 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>
);
}