@kadoui/react
Version:
Kadoui primitive components for React
11 lines (10 loc) • 632 B
JavaScript
"use client";
import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
import { use } from "react";
import { motion } from "framer-motion";
import { ProgressContext } from "./ProgressContext";
export function ProgressBar({ duration, children, ...p }) {
const { value, maxValue } = use(ProgressContext);
const percentage = Math.min(100, Math.max(0, (value / maxValue) * 100));
return (_jsx(motion.div, { initial: { width: 0 }, whileInView: { width: `${percentage}%` }, transition: { duration: duration || 3 }, ...p, children: children || _jsxs("span", { className: "text-xs", children: [percentage, "%"] }) }));
}