Progress

1'use client';
2import { type ReactNode } from 'react';
3import Link from 'next/link';
4import { Code2 } from 'lucide-react';
5
6function SectionCard({ title, sourceSlug, children }: { title: string; sourceSlug?: string; children: ReactNode }) {
7  return (
8    <div>
9      <div className="mb-3 flex flex-wrap items-center justify-between gap-2">
10        <h3 className="text-theme-xl font-semibold text-gray-800 dark:text-white/90">{title}</h3>
11        {sourceSlug && (
12          <Link
13            href={sourceSlug}
14            className="inline-flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-xs font-medium text-brand-500 transition-colors hover:bg-brand-50 dark:text-brand-400 dark:hover:bg-brand-500/10"
15          >
16            <Code2 className="size-3.5" />
17            View Source
18          </Link>
19        )}
20      </div>
21      <div className="rounded-xl border border-gray-200 bg-white p-6 dark:border-white/5 dark:bg-gray-dark">
22        {children}
23      </div>
24    </div>
25  );
26}
27
28export function ProgressBarsSection() {
29  const bars = [
30    { label: 'Default', pct: 65, color: 'bg-brand-500' },
31    { label: 'Success', pct: 85, color: 'bg-success-500' },
32    { label: 'Warning', pct: 45, color: 'bg-warning-500' },
33    { label: 'Error', pct: 30, color: 'bg-error-500' },
34  ];
35
36  const circularPct = 72;
37  const r = 40;
38  const circ = 2 * Math.PI * r;
39  const offset = circ - (circularPct / 100) * circ;
40
41  return (
42    <SectionCard title="Progress Bars" sourceSlug="/ui/source/ui-elements/progress">
43      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
44        {/* Linear */}
45        <div className="space-y-4">
46          {bars.map((b) => (
47            <div key={b.label}>
48              <div className="mb-1 flex justify-between text-sm">
49                <span className="font-medium text-gray-700 dark:text-gray-300">{b.label}</span>
50                <span className="text-gray-500 dark:text-gray-400">{b.pct}%</span>
51              </div>
52              <div className="h-2.5 overflow-hidden rounded-full bg-gray-100 dark:bg-white/10">
53                <div className={`h-full rounded-full ${b.color} transition-all duration-500`} style={{ width: `${b.pct}%` }} />
54              </div>
55            </div>
56          ))}
57        </div>
58
59        {/* Circular */}
60        <div className="flex items-center justify-center gap-6">
61          <div className="relative">
62            <svg className="size-28 -rotate-90" viewBox="0 0 100 100">
63              <circle cx="50" cy="50" r={r} fill="none" stroke="currentColor" strokeWidth="8" className="text-gray-100 dark:text-white/10" />
64              <circle cx="50" cy="50" r={r} fill="none" stroke="currentColor" strokeWidth="8" strokeLinecap="round" className="text-brand-500" strokeDasharray={circ} strokeDashoffset={offset} />
65            </svg>
66            <div className="absolute inset-0 flex items-center justify-center">
67              <span className="text-xl font-bold text-gray-800 dark:text-white/90">{circularPct}%</span>
68            </div>
69          </div>
70          <div className="space-y-2">
71            {[
72              { label: 'Storage', pct: 72, color: 'text-brand-500' },
73              { label: 'Bandwidth', pct: 56, color: 'text-success-500' },
74              { label: 'CPU', pct: 89, color: 'text-warning-500' },
75            ].map((s) => (
76              <div key={s.label} className="flex items-center gap-2 text-sm">
77                <span className={`size-2.5 rounded-full ${s.color.replace('text-', 'bg-')} `} />
78                <span className="text-gray-600 dark:text-gray-400">{s.label}</span>
79                <span className="font-medium text-gray-800 dark:text-white/90">{s.pct}%</span>
80              </div>
81            ))}
82          </div>
83        </div>
84      </div>
85    </SectionCard>
86  );
87}