pali112
/
workout-editor
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Extract Bar component to separate file

This commit is contained in:
Rene Saarsoo 2020-10-02 12:18:57 +03:00
parent 4011026e52
commit 3c83f0a253
2 changed files with 19 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/components/Bar.tsx Normal file
View File

@ -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;
`;

18
src/components/WorkoutPlot.tsx
View File

@ -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",