website refactor

apps/website/ui/GoalCard.tsx

@@ -1,41 +1,48 @@
 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';
+import { Box } from './primitives/Box';
+import { Text } from './Text';
 
-interface GoalCardProps {
+export interface GoalCardProps {
   title: string;
+  current: number;
+  target: number;
+  unit: string;
   icon: string;
-  goalLabel: string;
-  currentValue: number;
-  maxValue: number;
-  color?: string;
 }
 
-export function GoalCard({
-  title,
-  icon,
-  goalLabel,
-  currentValue,
-  maxValue,
-  color = 'text-primary-blue',
-}: GoalCardProps) {
+export const GoalCard = ({ 
+  title, 
+  current, 
+  target, 
+  unit, 
+  icon 
+}: GoalCardProps) => {
+  const percentage = Math.min(Math.max((current / target) * 100, 0), 100);
+
   return (
-    <Card bg="bg-charcoal-200/50" borderColor="border-primary-blue/30">
-      <Box display="flex" alignItems="center" gap={3} mb={3}>
+    <Card variant="default">
+      <Box display="flex" alignItems="center" gap={3} marginBottom={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>
+          <Text weight="bold" variant="high">{title}</Text>
+          <Text size="sm" variant="low">{unit}</Text>
         </Box>
-        <ProgressBar value={currentValue} max={maxValue} />
-      </Stack>
+      </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>
   );
-}
+};