57 lines
1.6 KiB
TypeScript
57 lines
1.6 KiB
TypeScript
import { Box } from './Box';
|
|
import { Card } from './Card';
|
|
import { Text } from './Text';
|
|
|
|
export interface GoalCardProps {
|
|
title: string;
|
|
current?: number;
|
|
target?: number;
|
|
unit?: string;
|
|
icon: string;
|
|
goalLabel?: string;
|
|
currentValue?: number;
|
|
maxValue?: number;
|
|
}
|
|
|
|
export const GoalCard = ({
|
|
title,
|
|
current,
|
|
target,
|
|
unit,
|
|
icon,
|
|
goalLabel,
|
|
currentValue,
|
|
maxValue
|
|
}: GoalCardProps) => {
|
|
const finalCurrent = currentValue ?? current ?? 0;
|
|
const finalTarget = maxValue ?? target ?? 100;
|
|
const finalUnit = goalLabel ?? unit ?? '';
|
|
const percentage = Math.min(Math.max((finalCurrent / finalTarget) * 100, 0), 100);
|
|
|
|
return (
|
|
<Card variant="default">
|
|
<Box display="flex" alignItems="center" gap={3} marginBottom={3}>
|
|
<Text size="2xl">{icon}</Text>
|
|
<Box>
|
|
<Text weight="bold" variant="high">{title}</Text>
|
|
<Text size="sm" variant="low">{finalUnit}</Text>
|
|
</Box>
|
|
</Box>
|
|
|
|
<Box marginBottom={2}>
|
|
<Box display="flex" alignItems="center" justifyContent="between" marginBottom={1}>
|
|
<Text size="xs" variant="low">Progress</Text>
|
|
<Text size="xs" weight="bold" variant="high">{Math.round(percentage)}%</Text>
|
|
</Box>
|
|
<Box fullWidth height="0.5rem" bg="var(--ui-color-bg-surface-muted)" style={{ borderRadius: '9999px', overflow: 'hidden' }}>
|
|
<Box fullHeight bg="var(--ui-color-intent-primary)" style={{ width: `${percentage}%` }} />
|
|
</Box>
|
|
</Box>
|
|
|
|
<Text size="xs" variant="low">
|
|
{finalCurrent} / {finalTarget} {finalUnit}
|
|
</Text>
|
|
</Card>
|
|
);
|
|
};
|