CircularProgress

"use client";

import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
  CircularProgress
} from "@pimolu/react";

const services = [
  { name: "API", value: 99 },
  { name: "CDN", value: 92 },
  { name: "Workers", value: 64 },
] as const;

export function DemoExample() {
  return (
    <div
      className="grid grid-cols-[repeat(auto-fit,minmax(min(100%,280px),1fr))] gap-6 min-w-0 items-start"
    >
      <Card>
        <CardHeader>
          <CardTitle>Upload</CardTitle>
          <CardDescription>
            The ring is small enough to sit next to a label, so the label
            stays outside.
          </CardDescription>
        </CardHeader>
        <CardContent>
          <div className="flex flex-wrap items-center gap-3 min-w-0">
            <CircularProgress
              label="design-system.zip"
              value={68}
              size="lg"
              showValue
              valueLabel="68 percent uploaded"
            />
            <div className="grid gap-5 min-w-0">
              <span className="text-sm text-muted">design-system.zip</span>
              <span className="text-sm text-muted leading-relaxed">68% · 4.2 MB of 6.1 MB</span>
            </div>
          </div>
        </CardContent>
      </Card>
      <Card>
        <CardHeader>
          <CardTitle>Quota</CardTitle>
          <CardDescription>
            A success tone with the value read inside the ring.
          </CardDescription>
        </CardHeader>
        <CardContent>
          <div className="flex flex-wrap items-center gap-3 min-w-0">
            <CircularProgress
              label="Storage quota"
              value={42}
              max={50}
              size="lg"
              variant="success"
              showValue
              formatValue={(value, max) => `${value}/${max}`}
            />
            <span className="text-sm text-muted leading-relaxed">Go used</span>
          </div>
        </CardContent>
      </Card>
      <Card>
        <CardHeader>
          <CardTitle>Syncing</CardTitle>
          <CardDescription>
            No known duration: the ring rotates and nothing is announced as
            a value.
          </CardDescription>
        </CardHeader>
        <CardContent>
          <div className="flex flex-wrap items-center gap-3 min-w-0">
            <CircularProgress label="Syncing files" size="lg" variant="secondary" />
            <span className="text-sm text-muted leading-relaxed">Syncing…</span>
          </div>
        </CardContent>
      </Card>
      <Card>
        <CardHeader>
          <CardTitle>Service health</CardTitle>
          <CardDescription>
            Three small gauges, one tone per state, with their labels
            outside the ring.
          </CardDescription>
        </CardHeader>
        <CardContent>
          <div className="grid gap-5 min-w-0">
            {
              services.map((service) => (<div
                key={service.name}
                className="flex flex-wrap items-center gap-3 min-w-0"
              >
                <CircularProgress
                  label={service.name}
                  value={service.value}
                  size="sm"
                  variant={service.value >= 90
                    ? "success"
                    : service.value >= 70
                      ? "warning"
                      : "danger"}
                />
                <span className="flex-1 min-w-0">
                  {service.name}
                </span>
                <span className="text-sm text-muted leading-relaxed">
                  {service.value}%
                </span>
              </div>))
            }
          </div>
        </CardContent>
      </Card>
    </div>
  );
}