48 lines
1.3 KiB
TypeScript
48 lines
1.3 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;
|
|
}
|
|
|
|
export const GoalCard = ({
|
|
title,
|
|
current,
|
|
target,
|
|
unit,
|
|
icon
|
|
}: GoalCardProps) => {
|
|
const percentage = Math.min(Math.max((current / target) * 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">{unit}</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">
|
|
{current} / {target} {unit}
|
|
</Text>
|
|
</Card>
|
|
);
|
|
};
|