87 lines
2.4 KiB
TypeScript
87 lines
2.4 KiB
TypeScript
'use client';
|
|
|
|
import { useWorkoutData } from '@/hooks/useWorkoutData';
|
|
import { UserMetrics } from '@/lib/storage/workoutStorage';
|
|
|
|
interface WorkoutMetricsDisplayProps {
|
|
className?: string;
|
|
showRefresh?: boolean;
|
|
onRefresh?: () => void;
|
|
}
|
|
|
|
export const WorkoutMetricsDisplay: React.FC<WorkoutMetricsDisplayProps> = ({
|
|
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>
|
|
<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>
|
|
);
|
|
};
|
|
|
|
export default WorkoutMetricsDisplay;
|