progress

1"use client"
2
3import * as React from "react"
4import { Progress as BaseProgress } from "@base-ui/react/progress"
5
6import { cn } from "@/lib/utils"
7
8type ProgressProps = React.ComponentPropsWithoutRef<typeof BaseProgress.Root> & {
9    showValue?: boolean
10}
11
12const Progress = React.forwardRef<
13    React.ComponentRef<typeof BaseProgress.Root>,
14    ProgressProps
15>(({ className, value, showValue = true, ...props }, ref) => {
16    const percentage = value ?? 0
17
18    return (
19        <BaseProgress.Root
20            ref={ref}
21            value={value}
22            className={cn("relative w-full pt-10", className)}
23            {...props}
24        >
25            {showValue && (
26                <div
27                    className="absolute top-0 -translate-x-1/2 transition-[left] duration-300 motion-reduce:transition-none"
28                    style={{ left: `${percentage}%` }}
29                >
30                    <span className="relative inline-flex items-center rounded-base border-2 border-black bg-white px-2 py-0.5 text-xs font-medium text-black">
31                        {percentage}%
32                        <svg
33                            className="absolute -bottom-2 left-1/2 -translate-x-1/2"
34                            width="10"
35                            height="8"
36                            viewBox="0 0 10 8"
37                            fill="none"
38                            aria-hidden="true"
39                        >
40                            <path d="M5 8L0 0H10L5 8Z" className="fill-black" />
41                            <path
42                                d="M0 0L5 8L10 0"
43                                stroke="black"
44                                strokeWidth="2"
45                                strokeLinejoin="round"
46                            />
47                        </svg>
48                    </span>
49                </div>
50            )}
51            <BaseProgress.Track className="relative h-3 w-full overflow-hidden rounded-base border-2 border-black bg-white">
52                <BaseProgress.Indicator className="h-full bg-main transition-[width,transform] duration-300 motion-reduce:transition-none" />
53            </BaseProgress.Track>
54        </BaseProgress.Root>
55    )
56})
57Progress.displayName = "Progress"
58
59const ProgressLabel = React.forwardRef<
60    React.ComponentRef<typeof BaseProgress.Label>,
61    React.ComponentPropsWithoutRef<typeof BaseProgress.Label>
62// … truncated