Progress

"use client";

import { Progress } from "@dashboardpack/core/components/ui/progress";
import { Button } from "@dashboardpack/core/components/ui/button";
import { useState } from "react";

export default function ProgressExample() {
  const [value, setValue] = useState(40);
  return (
    <div className="w-full max-w-sm space-y-4">
      <div className="flex justify-between text-sm">
        <span>Project completion</span>
        <span>{value}%</span>
      </div>
      <Progress
        value={value}
        role="progressbar"
        aria-valuemin={0}
        aria-valuemax={100}
        aria-valuenow={value}
        aria-label="Project completion"
      />
      <div className="flex gap-2">
        <Button
          size="sm"
          variant="outline"
          onClick={() => setValue(Math.max(0, value - 10))}
        >
          Decrease
        </Button>
        <Button size="sm" onClick={() => setValue(Math.min(100, value + 10))}>
          Increase
        </Button>
      </div>
      <Progress
        value={100}
        role="progressbar"
        aria-valuemin={0}
        aria-valuemax={100}
        aria-valuenow={100}
        aria-label="Completed milestone"
      />
    </div>
  );
}