aboutsummaryrefslogtreecommitdiff
path: root/Timeline/ClientApp/src/app/common/CollapseButton.tsx
diff options
context:
space:
mode:
authorcrupest <crupest@outlook.com>2020-06-11 17:27:15 +0800
committercrupest <crupest@outlook.com>2020-06-11 17:27:15 +0800
commitcf6cfe87b46a2a3eb2913209092ab4c5639e75c3 (patch)
treeeba7504d04dad89f67524b48d88a3b5eb27de6de /Timeline/ClientApp/src/app/common/CollapseButton.tsx
parent4b8abdd1921935ebb29d18961534db04a2e58fbb (diff)
downloadtimeline-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.tsx101
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;