progress-with-value

1"use client";
2
3import * as ProgressPrimitive from "@radix-ui/react-progress";
4import * as React from "react";
5
6import { cn } from "@/lib/utils";
7
8interface ProgressWithValueProps
9  extends React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root> {
10  position?: "start" | "start-outside" | "follow" | "end" | "end-outside";
11  label?: (value?: number | null) => React.ReactNode;
12  valueClassName?: string;
13}
14
15const ProgressWithValue = React.forwardRef<
16  React.ElementRef<typeof ProgressPrimitive.Root>,
17  ProgressWithValueProps
18>(
19  (
20    { className, valueClassName, value, position = "end", label, ...props },
21    ref,
22  ) => {
23    const valueCommonClass = cn(
24      "absolute -top-0.5 left-0 h-fit px-4 w-full items-center hidden",
25    );
26
27    const ProgressValue = () => (
28      <span
29        className={cn(
30          "hidden",
31          position === "start-outside" && "block text-primary",
32          position === "follow" &&
33            cn(valueCommonClass, "flex justify-end text-primary-foreground"),
34          position === "start" &&
35            cn(valueCommonClass, "flex justify-start text-primary-foreground"),
36          position === "end" &&
37            cn(valueCommonClass, "flex justify-end text-primary"),
38          position === "end-outside" && "block text-primary",
39          valueClassName,
40        )}
41      >
42        {typeof label === "function" ? label(value) : `${value}%`}
43      </span>
44    );
45
46    return (
47      <div className="flex items-center gap-2">
48        {position === "start-outside" && <ProgressValue />}
49        <ProgressPrimitive.Root
50          ref={ref}
51          className={cn(
52            "relative h-5 w-full overflow-hidden rounded-full bg-secondary",
53            className,
54          )}
55          {...props}
56        >
57          <ProgressPrimitive.Indicator
58            className="h-full w-full flex-1 bg-primary transition-all"
59            style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
60          >
61            {position === "follow" && <ProgressValue />}
62          </ProgressPrimitive.Indicator>
63          {(position === "start" || position === "end") && <ProgressValue />}
64        </ProgressPrimitive.Root>
65        {position === "end-outside" && <ProgressValue />}
66      </div>
67    );
68  },
69);
70ProgressWithValue.displayName = "ProgressWithValue";
71
72export { ProgressWithValue };
73