Generate ZWO output

src/App.tsx

@@ -5,6 +5,7 @@ import { parse, chunkRangeIntervals, Duration } from 'make-workout';
 import { ErrorMessage } from './components/ErrorMessage';
 import styled from 'styled-components';
 import { CodeEditor } from './components/CodeEditor';
+import { ZwoOutput } from './components/ZwoOutput';
 
 const defaultWorkout = `Name: Sample workout
 Description: Try changing it, and see what happens below.
@@ -55,6 +56,7 @@ export function App() {
       <WorkoutPlot intervals={chunkRangeIntervals(workout.intervals, chunkSize)} />
       {error && <ErrorMessage>{error}</ErrorMessage>}
       <WorkoutStats workout={workout} />
+      <ZwoOutput workout={workout} />
     </AppContainer>
   );
 }

src/components/ZwoOutput.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Workout, generateZwo } from 'make-workout';
+import styled from 'styled-components';
+
+const Header = styled.h2`
+  font-weight: normal;
+  font-size: 16px;
+`;
+
+const ZwoCode = styled.pre`
+  border: 1px solid #bbb;
+  border-radius: 3px;
+  padding: 10px;
+`;
+
+export const ZwoOutput: React.FC<{ workout: Workout }> = ({ workout }) => {
+  return (
+    <div>
+      <Header>Generated Zwift workout file (.zwo):</Header>
+      <ZwoCode>{generateZwo(workout)}</ZwoCode>
+    </div>
+  )
+};