LazyChart

"use client";

import { LazyChart } from "@dashboardpack/core/components/shared/lazy-chart";
import { Progress } from "@dashboardpack/core/components/ui/progress";

export default function LazyChartExample() {
  return (
    <div className="w-full max-w-sm">
      <LazyChart height={180}>
        <div className="space-y-5 rounded-xl border bg-background p-6">
          <h3 className="font-medium">Quarterly targets</h3>
          {[
            { name: "Revenue", value: 75 },
            { name: "Growth", value: 60 },
            { name: "Retention", value: 92 },
          ].map((metric) => (
            <div key={metric.name} className="space-y-2">
              <div className="flex justify-between text-xs">
                <span>{metric.name}</span>
                <span>{metric.value}%</span>
              </div>
              <Progress
                value={metric.value}
                role="progressbar"
                aria-valuemin={0}
                aria-valuemax={100}
                aria-valuenow={metric.value}
                aria-label={metric.name}
              />
            </div>
          ))}
        </div>
      </LazyChart>
    </div>
  );
}