Progress Indicator

"use client"

import * as React from "react"

import { Progress } from "@/components/ui/progress"

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

  React.useEffect(() => {
    const timer = setInterval(() => setValue((v) => (v >= 100 ? 0 : v + 4)), 300)
    return () => clearInterval(timer)
  }, [])

  return (
    <div className="flex w-full max-w-72 flex-col gap-2">
      <span className="text-mac-body">Copying “Photos Library”…</span>
      <Progress value={value} aria-label="Copy progress" />
      <span className="text-mac-subheadline text-mac-label-secondary tabular-nums">
        {Math.round(value * 1.4)} MB of 140 MB
      </span>
    </div>
  )
}