From 0ec5b1de9d1a6ce262d010075c416d831a9f141d Mon Sep 17 00:00:00 2001
From: Rene Saarsoo <nene@triin.net>
Date: Sun, 4 Oct 2020 00:33:17 +0300
Subject: [PATCH] Generate ZWO output

---
 src/App.tsx                  |  2 ++
 src/components/ZwoOutput.tsx | 23 +++++++++++++++++++++++
 2 files changed, 25 insertions(+)
 create mode 100644 src/components/ZwoOutput.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 45c3fa4..268a788 100644
--- a/src/App.tsx
+++ b/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>
   );
 }
diff --git a/src/components/ZwoOutput.tsx b/src/components/ZwoOutput.tsx
new file mode 100644
index 0000000..2493654
--- /dev/null
+++ b/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>
+  )
+};