Progress

import { Minus, Plus } from "lucide-react"
import * as React from "react"
import { Button } from "@/components/ui/button"
import { Progress } from "@/components/ui/progress"

export default function ProgressDemo() {
  const [value, setValue] = React.useState(60)

  return (
    <div className="grid w-64 gap-5">
      <div className="flex items-center gap-3">
        <Button
          variant="ghost"
          size="icon"
          aria-label="Less"
          onClick={() => setValue((v) => Math.max(0, v - 20))}
        >
          <Minus />
        </Button>
        <Progress value={value} aria-label="Upload" />
        <Button
          variant="ghost"
          size="icon"
          aria-label="More"
          onClick={() => setValue((v) => Math.min(100, v + 20))}
        >
          <Plus />
        </Button>
      </div>
      <Progress value={null} aria-label="Working" />
    </div>
  )
}