25 lines
1.3 KiB
TypeScript
25 lines
1.3 KiB
TypeScript
import React from 'react';
|
|
|
|
export const LinearProgress: React.FC<{ value: number; className?: string; }> = ({ value, className }) => (
|
|
<div className={`w-full h-2 rounded-full bg-[--background-tertiary] overflow-hidden ${className || ''}`}>
|
|
<div className="h-full bg-blue-500 transition-all" style={{ width: `${Math.min(100, Math.max(0, value))}%` }} />
|
|
</div>
|
|
);
|
|
|
|
export interface StepProgressProps { current: number; total: number; labels?: string[]; }
|
|
export const StepProgress: React.FC<StepProgressProps> = ({ current, total, labels }) => (
|
|
<div>
|
|
<div className="flex justify-between mb-2">
|
|
{Array.from({ length: total }).map((_, i) => (
|
|
<div key={i} className="flex-1 flex flex-col items-center">
|
|
<div className={`w-8 h-8 rounded-full flex items-center justify-center text-xs font-semibold mb-1 ${i <= current ? 'bg-blue-500 text-white' : 'bg-[--background-tertiary] text-[--text-secondary]'}`}>{i + 1}</div>
|
|
{labels && labels[i] && <span className="text-[10px] text-center px-1 text-[--text-secondary] truncate max-w-[72px]">{labels[i]}</span>}
|
|
</div>
|
|
))}
|
|
</div>
|
|
<LinearProgress value={((current + 1) / total) * 100} />
|
|
</div>
|
|
);
|
|
|
|
export default { LinearProgress, StepProgress };
|