Progress Circle

"use client";

import { ProgressCircle } from "@/components/ui/progress-circle";

export default function ProgressCircleDemo() {
  return (
    <div className="flex min-h-56 w-full items-center justify-center gap-12 bg-background p-8">
      <div className="flex flex-col items-center gap-3">
        <ProgressCircle
          aria-label="Uploading…"
          value={75}
          className="size-12 text-primary"
        />
        <span className="text-sm text-muted-foreground">75%</span>
      </div>
      <div className="flex flex-col items-center gap-3">
        <ProgressCircle
          aria-label="Loading…"
          isIndeterminate
          className="size-12 text-primary"
        />
        <span className="text-sm text-muted-foreground">Loading</span>
      </div>
    </div>
  );
}