From 77799b80a0cdb425da6437c5a1f462d28d3bb6c0 Mon Sep 17 00:00:00 2001
From: Rene Saarsoo <nene@triin.net>
Date: Sun, 4 Oct 2020 17:07:48 +0300
Subject: [PATCH] Extract AppTitle component

---
 src/App.tsx                 | 22 ++--------------------
 src/components/AppTitle.tsx | 25 +++++++++++++++++++++++++
 2 files changed, 27 insertions(+), 20 deletions(-)
 create mode 100644 src/components/AppTitle.tsx

diff --git a/src/App.tsx b/src/App.tsx
index e81c27d..ad90a4a 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -6,7 +6,7 @@ import { ErrorMessage } from './components/ErrorMessage';
 import styled from 'styled-components';
 import { CodeEditor } from './components/CodeEditor';
 import { ZwoOutput } from './components/ZwoOutput';
-import logo from "./logo.png";
+import { AppTitle } from './components/AppTitle';
 import { Credits } from './components/Credits';
 
 const defaultWorkout = `Name: Sample workout
@@ -29,24 +29,6 @@ const AppContainer = styled.div`
   margin: 0 auto;
 `;
 
-const AppTitle = styled.h1`
-  font-weight: normal;
-`;
-
-const Logo = styled.img.attrs({ src: logo, width: 45, height: 45 })`
-  margin-right: 0.5em;
-  vertical-align: bottom;
-`;
-
-const Beta = styled.span`
-  display: inline-block;
-  color: #cc2222;
-  opacity: 0.7;
-  font-size: 20px;
-  font-weight: bold;
-  transform: rotate(20deg) translate(-15px, -8px);
-`;
-
 // Split range-intervals into 1 minute chunks
 const chunkSize = new Duration(60);
 
@@ -67,7 +49,7 @@ export function App() {
   
   return (
     <AppContainer>
-      <AppTitle><Logo />Workout editor <Beta>beta</Beta></AppTitle>
+      <AppTitle />
       <CodeEditor onValueChange={onChange} value={text} />
       <WorkoutPlot intervals={chunkRangeIntervals(workout.intervals, chunkSize)} />
       {error && <ErrorMessage>{error}</ErrorMessage>}
diff --git a/src/components/AppTitle.tsx b/src/components/AppTitle.tsx
new file mode 100644
index 0000000..ca8e244
--- /dev/null
+++ b/src/components/AppTitle.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import styled from "styled-components";
+import logo from "../logo.png";
+
+const Title = styled.h1`
+  font-weight: normal;
+`;
+
+const Logo = styled.img.attrs({ src: logo, width: 45, height: 45 })`
+  margin-right: 0.5em;
+  vertical-align: bottom;
+`;
+
+const Beta = styled.span`
+  display: inline-block;
+  color: #cc2222;
+  opacity: 0.7;
+  font-size: 20px;
+  font-weight: bold;
+  transform: rotate(20deg) translate(-15px, -8px);
+`;
+
+export const AppTitle: React.FC<{}> = () => (
+  <Title><Logo />Workout editor <Beta>beta</Beta></Title>
+);