From d6cb5c892cf353c2a1be0eea8103fb5fa0191c80 Mon Sep 17 00:00:00 2001
From: Rene Saarsoo <nene@triin.net>
Date: Thu, 1 Oct 2020 21:39:29 +0300
Subject: [PATCH] Initial plot mockup

---
 src/App.tsx                    |  5 ++++-
 src/components/WorkoutPlot.tsx | 27 +++++++++++++++++++++++++++
 src/index.css                  |  2 ++
 3 files changed, 33 insertions(+), 1 deletion(-)
 create mode 100644 src/components/WorkoutPlot.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 44964ba..5016ac8 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,9 +1,12 @@
 import React from 'react';
+import { WorkoutPlot } from './components/WorkoutPlot';
 
 export function App() {
   return (
     <div>
-    Hello, world!
+      <h1>Workout editor</h1>
+      <textarea rows={10} cols={100} />
+      <WorkoutPlot />
     </div>
   );
 }
diff --git a/src/components/WorkoutPlot.tsx b/src/components/WorkoutPlot.tsx
new file mode 100644
index 0000000..1f584e6
--- /dev/null
+++ b/src/components/WorkoutPlot.tsx
@@ -0,0 +1,27 @@
+import React from "react";
+
+const Bar: React.FC<{ width: string; height: string; background: string }> = ({ width, height, background }) => (
+  <div style={{ display: "inline-block", verticalAlign: "bottom", paddingBottom: height, background, width, borderRadius: "10px", marginRight: "0.1%" }} />
+);
+
+export const WorkoutPlot: React.FC<{}> = () => {
+  return (
+    <div style={{ whiteSpace: "nowrap", overflow: "hidden", width: 800, outline: "1px dashed #0c0" }}>
+      <Bar background="#7f7f7f" width="1%" height="7.5%" />
+      <Bar background="#7f7f7f" width="1%" height="10%" />
+      <Bar background="#7f7f7f" width="1%" height="12.5%" />
+      <Bar background="#7f7f7f" width="1%" height="15%" />
+      <Bar background="#338cff" width="5%" height="20%" />
+      <Bar background="#ffcc3f" width="15%" height="25%" />
+      <Bar background="#338cff" width="5%" height="20%" />
+      <Bar background="#ffcc3f" width="15%" height="25%" />
+      <Bar background="#338cff" width="5%" height="20%" />
+      <Bar background="#ffcc3f" width="15%" height="25%" />
+      <Bar background="#338cff" width="5%" height="20%" />
+      <Bar background="#7f7f7f" width="1%" height="15%" />
+      <Bar background="#7f7f7f" width="1%" height="12.5%" />
+      <Bar background="#7f7f7f" width="1%" height="10%" />
+      <Bar background="#7f7f7f" width="1%" height="7.5%" />
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/index.css b/src/index.css
index ec2585e..ce2700d 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,5 +1,7 @@
 body {
   margin: 0;
+  padding: 40px;
+  background-color: #f5f5e5;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
     sans-serif;