Circular Progress with Custom Stroke Width

"use client";

import * as React from "react";
import CircularProgress from "@/components/ui/progress-12";
import { Slider } from "@/components/ui/slider";

export default function CircularProgressStrokeWidthDemo() {
  const [progress, setProgress] = React.useState([13]);

  return (
    <div className="mx-auto flex w-full max-w-xs flex-col items-center">
      <div className="flex items-center gap-1">
        <CircularProgress
          labelClassName="text-xl font-bold"
          renderLabel={(progress) => `${progress}%`}
          showLabel
          size={120}
          strokeWidth={10}
          value={progress[0]}
        />
        <CircularProgress
          circleStrokeWidth={12}
          labelClassName="text-xl font-bold"
          progressStrokeWidth={6}
          renderLabel={(progress) => `${progress}%`}
          showLabel
          size={120}
          value={progress[0]}
        />
        <CircularProgress
          circleStrokeWidth={6}
          labelClassName="text-xl font-bold"
          progressStrokeWidth={10}
          renderLabel={(progress) => `${progress}%`}
          showLabel
          size={120}
          value={progress[0]}
        />
      </div>
      <Slider
        className="mt-6"
        defaultValue={progress}
        max={100}
        onValueChange={setProgress}
        step={1}
      />
    </div>
  );
}