Add src/components/sections/metrics/MetricCardFourteenWithSaving.tsx

src/components/sections/metrics/MetricCardFourteenWithSaving.tsx

@@ -0,0 +1,70 @@
+'use client';
+
+import { useWorkoutStorage } from '@/hooks/useWorkoutStorage';
+import MetricCardFourteen from './MetricCardFourteen';
+import { useEffect, useState } from 'react';
+
+interface MetricCardFourteenWithSavingProps {
+  title: string;
+  tag: string;
+  tagAnimation?: 'none' | 'opacity' | 'slide-up' | 'blur-reveal';
+  metrics: Array<{
+    id: string;
+    value: string;
+    description: string;
+  }>;
+  metricsAnimation: 'none' | 'opacity' | 'slide-up' | 'blur-reveal';
+  useInvertedBackground: boolean;
+}
+
+export function MetricCardFourteenWithSaving({
+  title,
+  tag,
+  tagAnimation,
+  metrics,
+  metricsAnimation,
+  useInvertedBackground,
+}: MetricCardFourteenWithSavingProps) {
+  const { metrics: userMetrics, updateMetrics } = useWorkoutStorage();
+  const [displayMetrics, setDisplayMetrics] = useState(metrics);
+
+  useEffect(() => {
+    if (userMetrics) {
+      // Dynamically update metrics based on saved data
+      const updatedMetrics = metrics.map(metric => {
+        let value = metric.value;
+        
+        if (metric.id === '1' && userMetrics.totalDistance > 0) {
+          // Update steps/distance metric
+          value = `${Math.round(userMetrics.totalDistance).toLocaleString()}+`;
+        } else if (metric.id === '2' && userMetrics.totalWeight > 0) {
+          // Update volume metric
+          value = `${Math.round(userMetrics.totalWeight)} kg`;
+        } else if (metric.id === '3' && userMetrics.totalDistance > 0) {
+          // Update distance metric
+          value = `${Math.round(userMetrics.totalDistance)}+ km`;
+        } else if (metric.id === '4' && userMetrics.consistency > 0) {
+          // Update consistency metric
+          value = `${userMetrics.consistency} days`;
+        }
+        
+        return { ...metric, value };
+      });
+      
+      setDisplayMetrics(updatedMetrics);
+    }
+  }, [userMetrics, metrics]);
+
+  return (
+    <MetricCardFourteen
+      title={title}
+      tag={tag}
+      tagAnimation={tagAnimation}
+      metrics={displayMetrics}
+      metricsAnimation={metricsAnimation}
+      useInvertedBackground={useInvertedBackground}
+    />
+  );
+}
+
+export default MetricCardFourteenWithSaving;