From 3c83f0a253fb1ef4cfcc80dfed7de5be84502a39 Mon Sep 17 00:00:00 2001
From: Rene Saarsoo <nene@triin.net>
Date: Fri, 2 Oct 2020 12:18:57 +0300
Subject: [PATCH] Extract Bar component to separate file

---
 src/components/Bar.tsx         | 18 ++++++++++++++++++
 src/components/WorkoutPlot.tsx | 18 +-----------------
 2 files changed, 19 insertions(+), 17 deletions(-)
 create mode 100644 src/components/Bar.tsx

diff --git a/src/components/Bar.tsx b/src/components/Bar.tsx
new file mode 100644
index 0000000..92091c0
--- /dev/null
+++ b/src/components/Bar.tsx
@@ -0,0 +1,18 @@
+import styled from "styled-components";
+
+export type BarProps = {
+  width: string;
+  height: string;
+  background: string;
+};
+
+export const Bar = styled.div<BarProps>`
+  display: inline-block;
+  border-radius: 10px;
+  margin-right: 0.1%;
+  vertical-align: bottom;
+  height: ${(props) => props.height};
+  background: ${(props) => props.background};
+  width: ${(props) => props.width};
+  transition: width 0.1s, height 0.1s, background-color 0.1s;
+`;
diff --git a/src/components/WorkoutPlot.tsx b/src/components/WorkoutPlot.tsx
index 0a9e6a9..f47c73d 100644
--- a/src/components/WorkoutPlot.tsx
+++ b/src/components/WorkoutPlot.tsx
@@ -1,23 +1,7 @@
 import React from "react";
 import styled from "styled-components";
 import { Interval, Intensity, Duration, totalDuration, ZoneIndex, intensityToZoneIndex, maximumIntensity } from "make-workout";
-
-type BarProps = {
-  width: string;
-  height: string;
-  background: string;
-};
-
-const Bar = styled.div<BarProps>`
-  display: inline-block;
-  border-radius: 10px;
-  margin-right: 0.1%;
-  vertical-align: bottom;
-  height: ${(props) => props.height};
-  background: ${(props) => props.background};
-  width: ${(props) => props.width};
-  transition: width 0.1s, height 0.1s, background-color 0.1s;
-`;
+import { BarProps, Bar } from "./Bar";
 
 const zoneColorsMap: Record<ZoneIndex, string> = {
   0: "#7f7f7f",