42 lines
1.1 KiB
TypeScript
42 lines
1.1 KiB
TypeScript
import React from 'react';
|
|
import { Box } from './primitives/Box';
|
|
import { Stack } from './primitives/Stack';
|
|
import { Text } from './Text';
|
|
import { Heading } from './Heading';
|
|
import { Card } from './Card';
|
|
import { ProgressBar } from './ProgressBar';
|
|
|
|
interface GoalCardProps {
|
|
title: string;
|
|
icon: string;
|
|
goalLabel: string;
|
|
currentValue: number;
|
|
maxValue: number;
|
|
color?: string;
|
|
}
|
|
|
|
export function GoalCard({
|
|
title,
|
|
icon,
|
|
goalLabel,
|
|
currentValue,
|
|
maxValue,
|
|
color = 'text-primary-blue',
|
|
}: GoalCardProps) {
|
|
return (
|
|
<Card bg="bg-charcoal-200/50" borderColor="border-primary-blue/30">
|
|
<Box display="flex" alignItems="center" gap={3} mb={3}>
|
|
<Text size="2xl">{icon}</Text>
|
|
<Heading level={3}>{title}</Heading>
|
|
</Box>
|
|
<Stack gap={2}>
|
|
<Box display="flex" alignItems="center" justifyContent="between">
|
|
<Text size="sm" color="text-gray-400">{goalLabel}</Text>
|
|
<Text size="sm" className={color}>{currentValue}/{maxValue}</Text>
|
|
</Box>
|
|
<ProgressBar value={currentValue} max={maxValue} />
|
|
</Stack>
|
|
</Card>
|
|
);
|
|
}
|