AppCakes
78 lines
1.9 KiB
TypeScript
78 lines
1.9 KiB
TypeScript
import React from 'react';
|
|
import { IonProgressBar } from '@ionic/react';
|
|
|
|
interface CustomProgressBarProps {
|
|
value: number; // 0 to 1
|
|
label?: string;
|
|
statusText?: string;
|
|
color?: string; // Hex, rgb, or css variable
|
|
showPercent?: boolean;
|
|
style?: React.CSSProperties;
|
|
}
|
|
|
|
export const CustomProgressBar: React.FC<CustomProgressBarProps> = ({
|
|
value,
|
|
label,
|
|
statusText,
|
|
color = 'var(--ion-color-primary)',
|
|
showPercent = true,
|
|
style,
|
|
}) => {
|
|
const percentage = Math.round(Math.min(Math.max(value, 0), 1) * 100);
|
|
|
|
return (
|
|
<div style={{ width: '100%', ...style }}>
|
|
{/* Label and Status */}
|
|
{(label || statusText || showPercent) && (
|
|
<div
|
|
style={{
|
|
display: 'flex',
|
|
justifyContent: 'space-between',
|
|
alignItems: 'baseline',
|
|
fontSize: '0.8rem',
|
|
marginBottom: '6px',
|
|
fontWeight: '600',
|
|
}}
|
|
>
|
|
<span style={{ color: 'var(--ion-color-medium)' }}>
|
|
{label}{' '}
|
|
{statusText && (
|
|
<span style={{ fontWeight: 'normal', opacity: 0.85 }}>
|
|
• {statusText}
|
|
</span>
|
|
)}
|
|
</span>
|
|
{showPercent && (
|
|
<span
|
|
style={{
|
|
color: color,
|
|
fontVariantNumeric: 'tabular-nums',
|
|
fontFamily: 'ui-monospace, monospace',
|
|
fontWeight: '700',
|
|
}}
|
|
>
|
|
{percentage}%
|
|
</span>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* Progress Track */}
|
|
<IonProgressBar
|
|
value={value}
|
|
style={
|
|
{
|
|
height: '6px',
|
|
'--background': 'rgba(148, 163, 184, 0.1)',
|
|
'--progress-background': color,
|
|
borderRadius: '10px',
|
|
transition: 'value 0.3s ease',
|
|
} as React.CSSProperties
|
|
}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default CustomProgressBar;
|