Update src/components/workout/WorkoutMetricsDisplay.tsx

src/components/workout/WorkoutMetricsDisplay.tsx

@@ -1,84 +1,29 @@
 'use client';
 
-import { useWorkoutData } from '@/hooks/useWorkoutData';
-import { UserMetrics } from '@/lib/storage/workoutStorage';
+import React from 'react';
 
-interface WorkoutMetricsDisplayProps {
-  className?: string;
-  showRefresh?: boolean;
-  onRefresh?: () => void;
+interface MetricDisplay {
+  label: string;
+  value: string | number;
 }
 
-export const WorkoutMetricsDisplay: React.FC<WorkoutMetricsDisplayProps> = ({
+interface WorkoutMetricsDisplayProps {
+  metrics: MetricDisplay[];
+  className?: string;
+}
+
+const WorkoutMetricsDisplay: React.FC<WorkoutMetricsDisplayProps> = ({
+  metrics,
   className = '',
-  showRefresh = true,
-  onRefresh
 }) => {
-  const { metrics, refreshMetrics, isLoading } = useWorkoutData();
-
-  const handleRefresh = () => {
-    refreshMetrics();
-    onRefresh?.();
-  };
-
-  if (isLoading || !metrics) {
-    return <div className={className}>Loading metrics...</div>;
-  }
-
-  const formatMetric = (value: number, unit: string) => {
-    return `${value.toLocaleString()}${unit}`;
-  };
-
   return (
-    <div className={`workout-metrics ${className}`}>
-      <div className="metrics-grid">
-        <div className="metric-card">
-          <h3>Total Steps</h3>
-          <p>{formatMetric(metrics.totalSteps, ' steps')}</p>
+    <div className={`workout-metrics-display ${className}`}>
+      {metrics.map((metric, index) => (
+        <div key={index} className="metric-item">
+          <span className="metric-label">{metric.label}</span>
+          <span className="metric-value">{metric.value}</span>
         </div>
-        <div className="metric-card">
-          <h3>Total Distance</h3>
-          <p>{formatMetric(metrics.totalDistance, ' km')}</p>
-        </div>
-        <div className="metric-card">
-          <h3>Total Calories</h3>
-          <p>{formatMetric(metrics.totalCalories, ' kcal')}</p>
-        </div>
-        <div className="metric-card">
-          <h3>Total Volume</h3>
-          <p>{formatMetric(metrics.totalVolume, ' kg')}</p>
-        </div>
-        <div className="metric-card">
-          <h3>Workout Streak</h3>
-          <p>{metrics.workoutStreak} days</p>
-        </div>
-        {metrics.lastWorkoutDate && (
-          <div className="metric-card">
-            <h3>Last Workout</h3>
-            <p>{new Date(metrics.lastWorkoutDate).toLocaleDateString()}</p>
-          </div>
-        )}
-      </div>
-
-      {Object.keys(metrics.personalRecords).length > 0 && (
-        <div className="personal-records">
-          <h3>Personal Records</h3>
-          <ul>
-            {Object.entries(metrics.personalRecords).map(([exercise, weight]) => (
-              <li key={exercise}>
-                <span>{exercise}</span>
-                <span>{weight} kg</span>
-              </li>
-            ))}
-          </ul>
-        </div>
-      )}
-
-      {showRefresh && (
-        <button onClick={handleRefresh} className="refresh-button">
-          Refresh Metrics
-        </button>
-      )}
+      ))}
     </div>
   );
 };