Add WorkoutStats component

src/App.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useCallback } from 'react';
 import { WorkoutPlot } from './components/WorkoutPlot';
-import { parse, stats } from 'make-workout';
+import { WorkoutStats } from './components/WorkoutStats';
+import { parse } from 'make-workout';
 
 const defaultWorkout = `Name: Hello
 
@@ -11,24 +12,27 @@ Rest: 10:00 75%
 
 export function App() {
   const [text, setText] = useState(defaultWorkout);
-  const [statsText, setStatsText] = useState(stats(parse(defaultWorkout)));
+  const [workout, setWorkout] = useState(parse(defaultWorkout));
+  const [error, setError] = useState("");
 
   const onChange = useCallback((event: React.ChangeEvent<HTMLTextAreaElement>) => {
     const value = event.target.value;
     setText(value);
     try {
-      setStatsText(stats(parse(value)));
+      setWorkout(parse(value));
+      setError("");
     } catch (e) {
-      setStatsText(e.message);
+      setError(e.message);
     }
-  }, [setText, setStatsText]);
+  }, [setText, setWorkout, setError]);
   
   return (
     <div>
       <h1>Workout editor</h1>
       <textarea rows={10} cols={100} onChange={onChange} value={text} />
       <WorkoutPlot />
-      <pre>{statsText}</pre>
+      <div>{error}</div>
+      <WorkoutStats workout={workout} />
     </div>
   );
 }

src/components/WorkoutStats.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import { stats, Workout } from 'make-workout';
+
+export const WorkoutStats: React.FC<{workout: Workout}> = ({ workout }) => (
+  <pre>{stats(workout)}</pre>
+);