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

Collapse/expand the generated ZWO

This commit is contained in:
Rene Saarsoo 2023-01-04 16:01:34 +02:00
parent aa992f43b5
commit 59e6ae4726
1 changed files with 13 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/ZwoOutput.tsx
View File

@ -1,4 +1,4 @@
import React from "react";
import React, { useState } from "react";
import { Workout, generateZwo } from "zwiftout";
import styled from "styled-components";
@ -13,11 +13,22 @@ const ZwoCode = styled.pre`
padding: 10px;
`;
const ShowHideButton = styled.button`
border: 1px solid #bbb;
border-radius: 3px;
padding: 3px 8px;
float: right;
`;
export const ZwoOutput: React.FC<{ workout: Workout }> = ({ workout }) => {
const [expanded, setExpanded] = useState(false);
return (
<div>
<Header>Generated Zwift workout file (.zwo):</Header>
<ZwoCode>{generateZwo(workout)}</ZwoCode>
<ZwoCode>
<ShowHideButton onClick={() => setExpanded(!expanded)}>{expanded ? "Hide ZWO" : "Show ZWO"}</ShowHideButton>
{expanded ? generateZwo(workout) : ""}
</ZwoCode>
</div>
);
};