Progress

"use client";

import { Progress, ProgressRing } from "@waveinno/ui";

export default function ProgressExample() {
  return (
    <div className="grid gap-6 lg:grid-cols-[1fr_auto]">
      <div className="max-w-xl space-y-4">
        <Progress value={64} label="Profile complete" showValue />
        <Progress value={92} tone="danger" size="md" label="Capacity" showValue />
        <Progress value={72} variant="gradient" size="md" label="Onboarding" showValue />
        <Progress value={45} variant="striped" tone="success" size="lg" label="Uploading" showValue />
        <Progress value={60} variant="segmented" segments={5} size="md" label="Setup, step 3 of 5" />
        <Progress label="Syncing" />
      </div>
      <div className="flex items-center gap-5">
        <ProgressRing value={64} gradient size={84} label="Profile" />
        <ProgressRing value={82} tone="warning" size={64} label="Occupancy" />
        <ProgressRing value={100} tone="success" size={48} thickness={5} label="Done">
          ✓
        </ProgressRing>
      </div>
    </div>
  );
}