diff options
author | crupest <crupest@outlook.com> | 2020-06-11 17:27:15 +0800 |
---|---|---|
committer | crupest <crupest@outlook.com> | 2020-06-11 17:27:15 +0800 |
commit | 93ce8560fa19c3a91de99643fdbbe4f895a47b84 (patch) | |
tree | 66a9e6f1bbbbd5a0a25c13a0e51e7a7c1225871c /Timeline/ClientApp/src/app/common/CollapseButton.tsx | |
parent | 6893a1c1e43b8fc17eaaba72db90494d946b5091 (diff) | |
download | timeline-93ce8560fa19c3a91de99643fdbbe4f895a47b84.tar.gz timeline-93ce8560fa19c3a91de99643fdbbe4f895a47b84.tar.bz2 timeline-93ce8560fa19c3a91de99643fdbbe4f895a47b84.zip |
feat(front): Service worker is coming!
Diffstat (limited to 'Timeline/ClientApp/src/app/common/CollapseButton.tsx')
-rw-r--r-- | Timeline/ClientApp/src/app/common/CollapseButton.tsx | 101 |
1 files changed, 101 insertions, 0 deletions
diff --git a/Timeline/ClientApp/src/app/common/CollapseButton.tsx b/Timeline/ClientApp/src/app/common/CollapseButton.tsx new file mode 100644 index 00000000..5307c4ac --- /dev/null +++ b/Timeline/ClientApp/src/app/common/CollapseButton.tsx @@ -0,0 +1,101 @@ +import React from 'react'; + +export interface CollapseButtonProps { + collapse: boolean; + onClick: () => void; + className?: string; +} + +const CollapseButton: React.FC<CollapseButtonProps> = (props) => { + const { onClick, collapse, className } = props; + + return ( + <svg + width="25" + height="25" + viewBox="0 0 100 100" + className={className} + onClick={onClick} + > + {(() => { + if (collapse) { + return ( + <> + <line + stroke="currentcolor" + strokeWidth="14" + x1="50" + x2="90" + y1="17" + y2="17" + /> + <line + stroke="currentcolor" + strokeWidth="14" + x1="10" + x2="50" + y1="83" + y2="83" + /> + <line + stroke="currentcolor" + strokeWidth="14" + x1="17" + x2="17" + y1="50" + y2="90" + /> + <line + stroke="currentcolor" + strokeWidth="14" + x1="83" + x2="83" + y1="10" + y2="50" + /> + </> + ); + } else { + return ( + <> + <line + stroke="currentcolor" + strokeWidth="14" + x1="55" + x2="95" + y1="38" + y2="38" + /> + <line + stroke="currentcolor" + strokeWidth="14" + x1="5" + x2="45" + y1="62" + y2="62" + /> + <line + stroke="currentcolor" + strokeWidth="14" + x1="38" + x2="38" + y1="55" + y2="95" + /> + <line + stroke="currentcolor" + strokeWidth="14" + x1="62" + x2="62" + y1="5" + y2="45" + /> + </> + ); + } + })()} + </svg> + ); +}; + +export default CollapseButton; |