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 | cf6cfe87b46a2a3eb2913209092ab4c5639e75c3 (patch) | |
tree | eba7504d04dad89f67524b48d88a3b5eb27de6de /Timeline/ClientApp/src/app/common/CollapseButton.tsx | |
parent | 4b8abdd1921935ebb29d18961534db04a2e58fbb (diff) | |
download | timeline-cf6cfe87b46a2a3eb2913209092ab4c5639e75c3.tar.gz timeline-cf6cfe87b46a2a3eb2913209092ab4c5639e75c3.tar.bz2 timeline-cf6cfe87b46a2a3eb2913209092ab4c5639e75c3.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; |