@platformatic/ui-components 0.8.0 → 0.8.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/assets/{index-Dc2uZTON.css → index-BiRNzolW.css} +1 -1
- package/dist/assets/index-BvK6sCtd.js +40 -0
- package/dist/index.html +2 -2
- package/package.json +1 -1
- package/src/components/TabbedWindow.module.css +2 -2
- package/src/components/forms/Select.jsx +1 -1
- package/src/components/forms/Select.module.css +1 -1
- package/src/components/icons/AllAppsIcon.jsx +31 -21
- package/src/components/icons/AppConfigurationIcon.jsx +27 -29
- package/src/components/icons/AppDetailsIcon.jsx +13 -10
- package/src/components/icons/AppEditIcon.jsx +15 -15
- package/src/components/icons/AppIcon.jsx +7 -4
- package/src/components/icons/AppListIcon.jsx +60 -62
- package/src/components/icons/AppMissingIcon.jsx +97 -0
- package/src/components/icons/AppSettingsIcon.jsx +13 -9
- package/src/components/icons/{StoppedAppIcon.jsx → AppStoppedIcon.jsx} +15 -15
- package/src/components/icons/CreateAppIcon.jsx +13 -7
- package/src/components/icons/CreatingAppIcon.jsx +104 -0
- package/src/components/icons/ImportAppIcon.jsx +9 -10
- package/src/components/icons/K8SIcon.jsx +27 -6
- package/src/components/icons/PodDetailsIcon.jsx +12 -21
- package/src/components/icons/PodLogsIcon.jsx +26 -27
- package/src/components/icons/PodPerformanceIcon.jsx +20 -18
- package/src/components/icons/RemoveAppIcon.jsx +101 -0
- package/src/components/icons/index.js +9 -3
- package/dist/assets/index-Dev7WHoA.js +0 -40
package/dist/index.html
CHANGED
|
@@ -4,8 +4,8 @@
|
|
|
4
4
|
<meta charset="UTF-8" />
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
6
|
<title>Platformatic UI Components</title>
|
|
7
|
-
<script type="module" crossorigin src="/assets/index-
|
|
8
|
-
<link rel="stylesheet" crossorigin href="/assets/index-
|
|
7
|
+
<script type="module" crossorigin src="/assets/index-BvK6sCtd.js"></script>
|
|
8
|
+
<link rel="stylesheet" crossorigin href="/assets/index-BiRNzolW.css">
|
|
9
9
|
</head>
|
|
10
10
|
<body>
|
|
11
11
|
<div id="root"></div>
|
package/package.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
@apply bg-main-dark-blue flex flex-col gap-y-2 w-full;
|
|
3
3
|
}
|
|
4
4
|
.tabs-header {
|
|
5
|
-
@apply flex justify-start text-white uppercase hover:cursor-pointer tracking-super-widest h-[1.5rem] relative;
|
|
5
|
+
@apply flex justify-start text-white uppercase hover:cursor-pointer tracking-super-widest h-[1.5rem] relative items-center;
|
|
6
6
|
}
|
|
7
7
|
.tab {
|
|
8
8
|
@apply mx-8 min-w-[105px] text-center text-sm first:ml-0 last:mr-0 font-light opacity-70 hover:opacity-100;
|
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
visibility: hidden;
|
|
23
23
|
}
|
|
24
24
|
.divider {
|
|
25
|
-
@apply w-full border border-none rounded-md h-[1px] bg-white/15 absolute bottom-
|
|
25
|
+
@apply w-full border border-none rounded-md h-[1px] bg-white/15 absolute bottom-[-1px];
|
|
26
26
|
margin-block-start: 0;
|
|
27
27
|
margin-block-end: 0;
|
|
28
28
|
}
|
|
@@ -175,7 +175,7 @@ function Select ({
|
|
|
175
175
|
{beforeIcon?.iconName && getBeforeIcon()}
|
|
176
176
|
<input type='text' name={name} value={value} className={inputClassName} ref={inputRef} disabled={disabled} placeholder={placeholder} onFocus={() => handleFocus()} onBlur={(e) => handleBlur(e)} readOnly />
|
|
177
177
|
<div className={styles.icons}>
|
|
178
|
-
<PlatformaticIcon iconName={showOptions ? '
|
|
178
|
+
<PlatformaticIcon iconName={showOptions ? 'ArrowDownIcon' : 'ArrowRightIcon'} color={borderColor} disabled={disabled} onClick={() => setShowOptions(!showOptions)} size={SMALL} />
|
|
179
179
|
</div>
|
|
180
180
|
</div>
|
|
181
181
|
{showOptions && !showError && renderOptions()}
|
|
@@ -25,7 +25,7 @@
|
|
|
25
25
|
@apply border border-solid rounded
|
|
26
26
|
}
|
|
27
27
|
.option {
|
|
28
|
-
@apply
|
|
28
|
+
@apply cursor-pointer z-10 flex flex-row justify-between items-center px-4 rounded;
|
|
29
29
|
}
|
|
30
30
|
.bordered-bottom {
|
|
31
31
|
@apply border-b
|
|
@@ -29,13 +29,17 @@ const AllAppsIcon = ({
|
|
|
29
29
|
xmlns='http://www.w3.org/2000/svg'
|
|
30
30
|
className={className}
|
|
31
31
|
>
|
|
32
|
-
<path d='
|
|
33
|
-
<path d='
|
|
34
|
-
<path d='
|
|
35
|
-
<path d='
|
|
36
|
-
<path d='
|
|
37
|
-
<path d='M11
|
|
38
|
-
<path d='
|
|
32
|
+
<path d='M2.5 3.32227V5.91083L4.18212 6.91605M7.11442 3.32227V3.91718' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
33
|
+
<path d='M4.80721 4.51891L2.5 3.25946L4.80721 2L7.11442 3.25946L4.80721 4.51891ZM4.80721 4.51891V5.35508' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
34
|
+
<path d='M13.5002 3.32227V5.91083L11.8181 6.91605M8.88582 3.32227V3.91718' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
35
|
+
<path d='M11.223 4.51891V5.35508M13.5 3.25946L11.1928 4.51891L8.88558 3.25946L11.1928 2L13.5 3.25946Z' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
36
|
+
<path d='M8.88574 12.0653V12.621L11.193 13.9998M11.193 13.9998L13.5002 12.621V10.0325M11.193 13.9998V11.3549' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
37
|
+
<path d='M11.9246 9.10938L13.5005 9.96963L11.1933 11.2291L10.7104 10.9655' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
38
|
+
<path d='M7.1145 12.0653V12.621L4.80729 13.9998M4.80729 13.9998L2.50008 12.621V10.0325M4.80729 13.9998V11.3549' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
39
|
+
<path d='M4.07591 9.10938L2.5 9.96963L4.80721 11.2291L5.29004 10.9655' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
40
|
+
<path d='M7.97351 11.1067L5.23682 9.48268V6.43359L7.97351 7.99132M7.97351 11.1067L10.7102 9.48268V6.43359L7.97351 7.99132M7.97351 11.1067V7.99132' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
41
|
+
<path d='M7.97351 7.84302L5.23682 6.3595L7.97351 4.87598L10.7102 6.3595L7.97351 7.84302Z' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
42
|
+
|
|
39
43
|
</svg>
|
|
40
44
|
)
|
|
41
45
|
break
|
|
@@ -49,13 +53,16 @@ const AllAppsIcon = ({
|
|
|
49
53
|
xmlns='http://www.w3.org/2000/svg'
|
|
50
54
|
className={className}
|
|
51
55
|
>
|
|
52
|
-
<path d='
|
|
53
|
-
<path d='M7.
|
|
54
|
-
<path d='
|
|
55
|
-
<path d='
|
|
56
|
-
<path d='
|
|
57
|
-
<path d='
|
|
58
|
-
<path d='
|
|
56
|
+
<path d='M3.75 4.9834V8.86624L6.27318 10.3741M10.6716 4.9834V5.87576' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
57
|
+
<path d='M7.21082 6.77837L3.75 4.88918L7.21082 3L10.6716 4.88918L7.21082 6.77837ZM7.21082 6.77837V8.03263' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
58
|
+
<path d='M20.2502 4.9834V8.86624L17.7271 10.3741M13.3286 4.9834V5.87576' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
59
|
+
<path d='M16.8345 6.77837V8.03263M20.25 4.88918L16.7892 6.77837L13.3284 4.88918L16.7892 3L20.25 4.88918Z' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
60
|
+
<path d='M13.3284 18.0979V18.9315L16.7892 20.9997M16.7892 20.9997L20.25 18.9315V15.0487M16.7892 20.9997V17.0324' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
61
|
+
<path d='M17.8866 13.6641L20.2505 14.9544L16.7897 16.8436L16.0654 16.4483' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
62
|
+
<path d='M10.6719 18.0979V18.9315L7.21106 20.9997M7.21106 20.9997L3.75024 18.9315V15.0487M7.21106 20.9997V17.0324' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
63
|
+
<path d='M6.11411 13.6641L3.75025 14.9544L7.21107 16.8436L7.9353 16.4483' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
64
|
+
<path d='M11.9603 16.6601L7.85522 14.224V9.65039L11.9603 11.987M11.9603 16.6601L16.0653 14.224V9.65039L11.9603 11.987M11.9603 16.6601V11.987' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
65
|
+
<path d='M11.9603 11.7645L7.85522 9.53925L11.9603 7.31396L16.0653 9.53925L11.9603 11.7645Z' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
59
66
|
|
|
60
67
|
</svg>
|
|
61
68
|
)
|
|
@@ -90,13 +97,16 @@ const AllAppsIcon = ({
|
|
|
90
97
|
xmlns='http://www.w3.org/2000/svg'
|
|
91
98
|
className={className}
|
|
92
99
|
>
|
|
93
|
-
<path d='
|
|
94
|
-
<path d='M12.
|
|
95
|
-
<path d='
|
|
96
|
-
<path d='
|
|
97
|
-
<path d='
|
|
98
|
-
<path d='
|
|
99
|
-
<path d='
|
|
100
|
+
<path d='M6.25 8.30566V14.7771L10.4553 17.2901M17.7861 8.30566V9.79294' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
101
|
+
<path d='M12.018 11.2973L6.25 8.14864L12.018 5L17.7861 8.14864L12.018 11.2973ZM12.018 11.2973V13.3877' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
102
|
+
<path d='M33.7505 8.30566V14.7771L29.5452 17.2901M22.2144 8.30566V9.79294' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
103
|
+
<path d='M28.0577 11.2973V13.3877M33.7502 8.14864L27.9822 11.2973L22.2142 8.14864L27.9822 5L33.7502 8.14864Z' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
104
|
+
<path d='M22.2141 30.1632V31.5526L27.9821 34.9995M27.9821 34.9995L33.7502 31.5526V25.0812M27.9821 34.9995V28.3873' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
105
|
+
<path d='M29.8112 22.7734L33.751 24.9241L27.9829 28.0727L26.7759 27.4138' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
106
|
+
<path d='M17.7864 30.1632V31.5526L12.0183 34.9995M12.0183 34.9995L6.25032 31.5526V25.0812M12.0183 34.9995V28.3873' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
107
|
+
<path d='M10.19 22.7734L6.25025 24.9241L12.0183 28.0727L13.2253 27.4138' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
108
|
+
<path d='M19.9343 27.7669L13.0925 23.7067V16.084L19.9343 19.9783M19.9343 27.7669L26.776 23.7067V16.084L19.9343 19.9783M19.9343 27.7669V19.9783' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
109
|
+
<path d='M19.934 19.6076L13.0923 15.8987L19.934 12.1899L26.7757 15.8987L19.934 19.6076Z' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
100
110
|
</svg>
|
|
101
111
|
)
|
|
102
112
|
break
|
|
@@ -30,15 +30,15 @@ const AppConfigurationIcon = ({
|
|
|
30
30
|
xmlns='http://www.w3.org/2000/svg'
|
|
31
31
|
className={className}
|
|
32
32
|
>
|
|
33
|
-
<path d='
|
|
34
|
-
<path d='
|
|
35
|
-
<
|
|
36
|
-
<
|
|
37
|
-
<circle cx='
|
|
38
|
-
<circle cx='
|
|
39
|
-
<
|
|
40
|
-
<path d='
|
|
41
|
-
<path d='
|
|
33
|
+
<path d='M2.5 5V10.8722L8 14M8 14L13.5 10.8722V5M8 14V11' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
34
|
+
<path d='M4.5 6L2.5 4.85711L8 2L13.5 4.85711L11.4538 5.79253' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
35
|
+
<rect x='5' y='5' width='6' height='6' rx='1' stroke='none' />
|
|
36
|
+
<path d='M5 7H11' stroke='none' />
|
|
37
|
+
<circle cx='6.25' cy='6' r='0.25' fill='none' className={filledClassName} />
|
|
38
|
+
<circle cx='7' cy='6' r='0.25' fill='none' className={filledClassName} />
|
|
39
|
+
<circle cx='7.75' cy='6' r='0.25' fill='none' className={filledClassName} />
|
|
40
|
+
<path d='M6.5 8.25H8.25' stroke='none' strokeLinecap='round' />
|
|
41
|
+
<path d='M6.5 9.5H9.5' stroke='none' strokeLinecap='round' />
|
|
42
42
|
</svg>
|
|
43
43
|
)
|
|
44
44
|
break
|
|
@@ -52,16 +52,15 @@ const AppConfigurationIcon = ({
|
|
|
52
52
|
xmlns='http://www.w3.org/2000/svg'
|
|
53
53
|
className={className}
|
|
54
54
|
>
|
|
55
|
-
<path d='
|
|
56
|
-
<path d='
|
|
57
|
-
<
|
|
58
|
-
<
|
|
59
|
-
<circle cx='
|
|
60
|
-
<circle cx='
|
|
61
|
-
<
|
|
62
|
-
<path d='
|
|
63
|
-
<path d='
|
|
64
|
-
|
|
55
|
+
<path d='M3.75 7.5V16.3083L12 21M12 21L20.25 16.3083V7.5M12 21V16.5' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
56
|
+
<path d='M6.75 9L3.75 7.28567L12 3L20.25 7.28567L17.1807 8.6888' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
57
|
+
<rect x='7.5' y='7.5' width='9' height='9' rx='1' stroke='none' strokeWidth={1.5} />
|
|
58
|
+
<path d='M7.5 10.5H16.5' stroke='none' strokeWidth={1.5} />
|
|
59
|
+
<circle cx='9.375' cy='9' r='0.375' fill='none' className={filledClassName} />
|
|
60
|
+
<circle cx='10.5' cy='9' r='0.375' fill='none' className={filledClassName} />
|
|
61
|
+
<circle cx='11.625' cy='9' r='0.375' fill='none' className={filledClassName} />
|
|
62
|
+
<path d='M9.75 12.375H12.375' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
|
|
63
|
+
<path d='M9.75 14.25H14.25' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
|
|
65
64
|
</svg>
|
|
66
65
|
)
|
|
67
66
|
break
|
|
@@ -75,16 +74,15 @@ const AppConfigurationIcon = ({
|
|
|
75
74
|
xmlns='http://www.w3.org/2000/svg'
|
|
76
75
|
className={className}
|
|
77
76
|
>
|
|
78
|
-
<path d='
|
|
79
|
-
<path d='
|
|
80
|
-
<
|
|
81
|
-
<
|
|
82
|
-
<circle cx='
|
|
83
|
-
<circle cx='
|
|
84
|
-
<
|
|
85
|
-
<path d='
|
|
86
|
-
<path d='
|
|
87
|
-
|
|
77
|
+
<path d='M6.25 12.4999V27.1805L20 35M20 35L33.75 27.1805V12.4999M20 35V27.4999' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
78
|
+
<path d='M11.25 15L6.25 12.1428L20 5L33.75 12.1428L28.6345 14.4813' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
79
|
+
<rect x='12.5' y='12.5' width='15' height='15' rx='1' stroke='none' strokeWidth={2} />
|
|
80
|
+
<path d='M12.5 17.5H27.5' stroke='none' strokeWidth={2} />
|
|
81
|
+
<circle cx='15.625' cy='15' r='0.625' fill='none' className={filledClassName} />
|
|
82
|
+
<circle cx='17.5' cy='15' r='0.625' fill='none' className={filledClassName} />
|
|
83
|
+
<circle cx='19.375' cy='15' r='0.625' fill='none' className={filledClassName} />
|
|
84
|
+
<path d='M16.25 20.625H20.625' stroke='none' strokeWidth={2} strokeLinecap='round' />
|
|
85
|
+
<path d='M16.25 23.75H23.75' stroke='none' strokeWidth={2} strokeLinecap='round' />
|
|
88
86
|
</svg>
|
|
89
87
|
)
|
|
90
88
|
break
|
|
@@ -29,9 +29,10 @@ const AppDetailsIcon = ({
|
|
|
29
29
|
xmlns='http://www.w3.org/2000/svg'
|
|
30
30
|
className={className}
|
|
31
31
|
>
|
|
32
|
-
<path d='
|
|
33
|
-
<
|
|
34
|
-
<
|
|
32
|
+
<path d='M2.5 5V10.8722L8 14M8 14L13.5 10.8722V5M8 14V10.8722' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
33
|
+
<path d='M4 5.71428L2.5 4.85711L8 2L13.5 4.85711L11.625 5.71428' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
34
|
+
<circle cx='7.58333' cy='7.08333' r='2.08333' stroke='none' />
|
|
35
|
+
<path d='M10.5 10L9.25 8.75' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
35
36
|
</svg>
|
|
36
37
|
)
|
|
37
38
|
break
|
|
@@ -45,9 +46,11 @@ const AppDetailsIcon = ({
|
|
|
45
46
|
xmlns='http://www.w3.org/2000/svg'
|
|
46
47
|
className={className}
|
|
47
48
|
>
|
|
48
|
-
<path d='
|
|
49
|
-
<
|
|
50
|
-
<
|
|
49
|
+
<path d='M3.75 7.5V16.3083L12 21M12 21L20.25 16.3083V7.5M12 21V16.3083' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
50
|
+
<path d='M6 8.57142L3.75 7.28567L12 3L20.25 7.28567L17.4375 8.57142' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
51
|
+
<circle cx='11.375' cy='10.625' r='3.125' stroke='none' strokeWidth={1.5} />
|
|
52
|
+
<path d='M15.75 15L13.875 13.125' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
53
|
+
|
|
51
54
|
</svg>
|
|
52
55
|
)
|
|
53
56
|
break
|
|
@@ -64,7 +67,6 @@ const AppDetailsIcon = ({
|
|
|
64
67
|
<path d='M21.3205 12V9L12.6603 4L4 9V19L10.6602 22.8452' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
65
68
|
<circle cx='18.4935' cy='19.8333' r='5.83333' stroke='none' strokeWidth={1.5} />
|
|
66
69
|
<path d='M26.6602 28L23.1602 24.5' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
67
|
-
|
|
68
70
|
</svg>
|
|
69
71
|
)
|
|
70
72
|
break
|
|
@@ -78,9 +80,10 @@ const AppDetailsIcon = ({
|
|
|
78
80
|
xmlns='http://www.w3.org/2000/svg'
|
|
79
81
|
className={className}
|
|
80
82
|
>
|
|
81
|
-
<path d='
|
|
82
|
-
<
|
|
83
|
-
<
|
|
83
|
+
<path d='M6.25 12.5V27.1806L20 35M20 35L33.75 27.1806V12.5M20 35V27.1806' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
84
|
+
<path d='M10 14.2857L6.25 12.1428L20 5L33.75 12.1428L29.0625 14.2857' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
85
|
+
<circle cx='18.9583' cy='17.7083' r='5.20833' stroke='none' strokeWidth={2} />
|
|
86
|
+
<path d='M26.25 25L23.125 21.875' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
84
87
|
|
|
85
88
|
</svg>
|
|
86
89
|
)
|
|
@@ -29,11 +29,11 @@ const AppEditIcon = ({
|
|
|
29
29
|
xmlns='http://www.w3.org/2000/svg'
|
|
30
30
|
className={className}
|
|
31
31
|
>
|
|
32
|
-
<path d='
|
|
33
|
-
<
|
|
34
|
-
<
|
|
35
|
-
<path d='
|
|
36
|
-
|
|
32
|
+
<path d='M2.5 5V10.8722L8 14M8 14L13.5 10.8722V5M8 14V10' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
33
|
+
<path d='M11.6398 5.82342L13.5 4.85711L8 2L2.5 4.85711L5.25 6.28567' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
34
|
+
<rect x='8.75085' y='5.49182' width='1.4029' height='5.14397' transform='rotate(45 8.75085 5.49182)' stroke='none' strokeLinejoin='round' />
|
|
35
|
+
<path d='M6.1054 10.1213L5.1134 9.12927L4.6174 10.6173L6.1054 10.1213Z' stroke='none' strokeLinejoin='round' />
|
|
36
|
+
<path d='M9.24668 4.996C9.52061 4.72207 9.96474 4.72207 10.2387 4.996V4.996C10.5126 5.26993 10.5126 5.71407 10.2387 5.988L9.74268 6.484L8.75068 5.492L9.24668 4.996Z' stroke='none' />
|
|
37
37
|
</svg>
|
|
38
38
|
)
|
|
39
39
|
break
|
|
@@ -47,11 +47,11 @@ const AppEditIcon = ({
|
|
|
47
47
|
xmlns='http://www.w3.org/2000/svg'
|
|
48
48
|
className={className}
|
|
49
49
|
>
|
|
50
|
-
<path d='
|
|
51
|
-
<
|
|
52
|
-
<
|
|
53
|
-
<path d='
|
|
54
|
-
|
|
50
|
+
<path d='M3.75 7.5V16.3083L12 21M12 21L20.25 16.3083V7.5M12 21V15' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
51
|
+
<path d='M17.4598 8.73514L20.25 7.28567L12 3L3.75 7.28567L7.875 9.42851' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
52
|
+
<rect x='13.1262' y='8.23779' width='2.10435' height='7.71595' transform='rotate(45 13.1262 8.23779)' stroke='none' strokeWidth={1.5} strokeLinejoin='round' />
|
|
53
|
+
<path d='M9.15817 15.1818L7.67017 13.6938L6.92617 15.9258L9.15817 15.1818Z' stroke='none' strokeWidth={1.5} strokeLinejoin='round' />
|
|
54
|
+
<path d='M13.9069 7.45711C14.2974 7.06658 14.9306 7.06658 15.3211 7.45711L15.3949 7.53089C15.7854 7.92142 15.7854 8.55458 15.3949 8.94511L14.614 9.726L13.126 8.238L13.9069 7.45711Z' stroke='none' strokeWidth={1.5} />
|
|
55
55
|
</svg>
|
|
56
56
|
)
|
|
57
57
|
break
|
|
@@ -65,11 +65,11 @@ const AppEditIcon = ({
|
|
|
65
65
|
xmlns='http://www.w3.org/2000/svg'
|
|
66
66
|
className={className}
|
|
67
67
|
>
|
|
68
|
-
<path d='
|
|
69
|
-
<
|
|
70
|
-
<
|
|
71
|
-
<path d='
|
|
72
|
-
|
|
68
|
+
<path d='M6.25 12.5V27.1806L20 35M20 35L33.75 27.1806V12.5M20 35V25' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
69
|
+
<path d='M29.0996 14.5586L33.75 12.1428L20 5L6.25 12.1428L13.125 15.7142' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
70
|
+
<rect x='21.8771' y='13.7296' width='3.50725' height='12.8599' transform='rotate(45 21.8771 13.7296)' stroke='none' strokeWidth={2} strokeLinejoin='round' />
|
|
71
|
+
<path d='M15.2636 25.3031L12.7836 22.8231L11.5436 26.5431L15.2636 25.3031Z' stroke='none' strokeWidth={2} strokeLinejoin='round' />
|
|
72
|
+
<path d='M23.6496 11.9571C24.0401 11.5666 24.6733 11.5666 25.0638 11.9571L26.1296 13.0229C26.5201 13.4134 26.5201 14.0466 26.1296 14.4371L24.3567 16.21L21.8767 13.73L23.6496 11.9571Z' stroke='none' strokeWidth={2} />
|
|
73
73
|
</svg>
|
|
74
74
|
)
|
|
75
75
|
break
|
|
@@ -29,7 +29,8 @@ const AppIcon = ({
|
|
|
29
29
|
xmlns='http://www.w3.org/2000/svg'
|
|
30
30
|
className={className}
|
|
31
31
|
>
|
|
32
|
-
<path d='
|
|
32
|
+
<path d='M2.5 5V10.8722L8 14M8 14L13.5 10.8722V5M8 14V8.00001' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
33
|
+
<path d='M8 7.71423L2.5 4.85711L8 2L13.5 4.85711L8 7.71423Z' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
33
34
|
</svg>
|
|
34
35
|
)
|
|
35
36
|
break
|
|
@@ -43,8 +44,8 @@ const AppIcon = ({
|
|
|
43
44
|
xmlns='http://www.w3.org/2000/svg'
|
|
44
45
|
className={className}
|
|
45
46
|
>
|
|
46
|
-
<path d='
|
|
47
|
-
|
|
47
|
+
<path d='M3.75 7.5V16.3083L12 21M12 21L20.25 16.3083V7.5M12 21V12' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
48
|
+
<path d='M12 11.5713L3.75 7.28567L12 3L20.25 7.28567L12 11.5713Z' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
48
49
|
</svg>
|
|
49
50
|
)
|
|
50
51
|
break
|
|
@@ -58,7 +59,9 @@ const AppIcon = ({
|
|
|
58
59
|
xmlns='http://www.w3.org/2000/svg'
|
|
59
60
|
className={className}
|
|
60
61
|
>
|
|
61
|
-
<path d='
|
|
62
|
+
<path d='M6.25 12.4999V27.1805L20 35M20 35L33.75 27.1805V12.4999M20 35V20' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
63
|
+
<path d='M20 19.2856L6.25 12.1428L20 5L33.75 12.1428L20 19.2856Z' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
64
|
+
|
|
62
65
|
</svg>
|
|
63
66
|
)
|
|
64
67
|
break
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as React from 'react'
|
|
2
2
|
import PropTypes from 'prop-types'
|
|
3
3
|
import styles from './Icons.module.css'
|
|
4
|
-
import { COLORS_ICON, SIZES, MEDIUM,
|
|
4
|
+
import { COLORS_ICON, SIZES, MEDIUM, LARGE, MAIN_DARK_BLUE, SMALL } from '../constants'
|
|
5
5
|
|
|
6
6
|
const AppListIcon = ({
|
|
7
7
|
color = MAIN_DARK_BLUE,
|
|
@@ -17,75 +17,73 @@ const AppListIcon = ({
|
|
|
17
17
|
className += ` ${styles.iconInactive}`
|
|
18
18
|
}
|
|
19
19
|
let icon = <></>
|
|
20
|
+
const filledClassName = styles[`filled-${color}`]
|
|
20
21
|
|
|
21
22
|
switch (size) {
|
|
22
|
-
case
|
|
23
|
+
case SMALL:
|
|
23
24
|
icon = (
|
|
24
25
|
<svg
|
|
25
|
-
width={
|
|
26
|
-
height={
|
|
27
|
-
viewBox='0 0
|
|
26
|
+
width={16}
|
|
27
|
+
height={16}
|
|
28
|
+
viewBox='0 0 16 16'
|
|
28
29
|
fill='none'
|
|
29
30
|
xmlns='http://www.w3.org/2000/svg'
|
|
30
31
|
className={className}
|
|
31
32
|
>
|
|
32
|
-
<path
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
/>
|
|
38
|
-
<
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
/>
|
|
57
|
-
<
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
/>
|
|
78
|
-
<path
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
/>
|
|
85
|
-
<
|
|
86
|
-
<circle cx={19.9961} cy={7} r={2} stroke='none' strokeWidth={2} />
|
|
87
|
-
<circle cx={30.9961} cy={12} r={2} stroke='none' strokeWidth={2} />
|
|
88
|
-
<circle cx={38.9961} cy={17} r={2} stroke='none' strokeWidth={2} />
|
|
33
|
+
<path d='M2.5 5V10.8722L8 14M8 14L13.5 10.8722V5M8 14V11' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
34
|
+
<path d='M5.5 6.5L2.5 4.85711L8 2L13.5 4.85711L11.4538 5.79253' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
35
|
+
<path d='M9.9 5H6.5C5.94772 5 5.5 5.44772 5.5 6V10C5.5 10.5523 5.94772 11 6.5 11H9.9C10.4523 11 10.9 10.5523 10.9 10V6C10.9 5.44772 10.4523 5 9.9 5Z' stroke='none' strokeLinecap='round' />
|
|
36
|
+
<rect x='6.40002' y='7.70001' width='0.9' height='0.9' rx='0.45' fill='none' className={filledClassName} />
|
|
37
|
+
<rect x='6.40002' y='6.02014' width='0.9' height='0.9' rx='0.45' fill='none' className={filledClassName} />
|
|
38
|
+
<path d='M7.90002 6.5H9.50012' stroke='none' strokeLinecap='round' />
|
|
39
|
+
<path d='M7.90002 8.15002H9.50012' stroke='none' strokeLinecap='round' />
|
|
40
|
+
<path d='M7.90002 9.5H8.50002' stroke='none' strokeLinecap='round' />
|
|
41
|
+
<rect x='6.40002' y='9.04999' width='0.9' height='0.9' rx='0.45' fill='none' className={filledClassName} />
|
|
42
|
+
</svg>
|
|
43
|
+
)
|
|
44
|
+
break
|
|
45
|
+
case MEDIUM:
|
|
46
|
+
icon = (
|
|
47
|
+
<svg
|
|
48
|
+
width={24}
|
|
49
|
+
height={24}
|
|
50
|
+
viewBox='0 0 24 24'
|
|
51
|
+
fill='none'
|
|
52
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
53
|
+
className={className}
|
|
54
|
+
>
|
|
55
|
+
<path d='M3.75 7.5V16.3083L12 21M12 21L20.25 16.3083V7.5M12 21V16.5' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
56
|
+
<path d='M8.25 9.75L3.75 7.28567L12 3L20.25 7.28567L17.1807 8.6888' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
57
|
+
<path d='M15.35 7.5H9.25C8.69772 7.5 8.25 7.94772 8.25 8.5V15.5C8.25 16.0523 8.69772 16.5 9.25 16.5H15.35C15.9023 16.5 16.35 16.0523 16.35 15.5V8.5C16.35 7.94772 15.9023 7.5 15.35 7.5Z' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
|
|
58
|
+
<rect x='9.6001' y='11.55' width='1.35' height='1.35' rx='0.675' fill='none' className={filledClassName} />
|
|
59
|
+
<rect x='9.6001' y='9.03015' width='1.35' height='1.35' rx='0.675' fill='none' className={filledClassName} />
|
|
60
|
+
<path d='M11.8501 9.75H14.2502' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
|
|
61
|
+
<path d='M11.8501 12.225H14.2502' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
|
|
62
|
+
<path d='M11.8501 14.25H12.7501' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
|
|
63
|
+
<rect x='9.6001' y='13.575' width='1.35' height='1.35' rx='0.675' fill='none' className={filledClassName} />
|
|
64
|
+
|
|
65
|
+
</svg>
|
|
66
|
+
)
|
|
67
|
+
break
|
|
68
|
+
case LARGE:
|
|
69
|
+
icon = (
|
|
70
|
+
<svg
|
|
71
|
+
width={40}
|
|
72
|
+
height={40}
|
|
73
|
+
viewBox='0 0 40 40'
|
|
74
|
+
fill='none'
|
|
75
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
76
|
+
className={className}
|
|
77
|
+
>
|
|
78
|
+
<path d='M6.25 12.4999V27.1805L20 35M20 35L33.75 27.1805V12.4999M20 35V27.4999' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
79
|
+
<path d='M13.75 16.25L6.25 12.1428L20 5L33.75 12.1428L28.6345 14.4813' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
80
|
+
<path d='M26.25 12.5H14.75C14.1977 12.5 13.75 12.9477 13.75 13.5V26.5C13.75 27.0523 14.1977 27.5 14.75 27.5H26.25C26.8023 27.5 27.25 27.0523 27.25 26.5V13.5C27.25 12.9477 26.8023 12.5 26.25 12.5Z' stroke='none' strokeWidth={2} strokeLinecap='round' />
|
|
81
|
+
<rect x='16' y='19.25' width='2.25' height='2.25' rx='1.125' fill='none' className={filledClassName} />
|
|
82
|
+
<rect x='16' y='15.0503' width='2.25' height='2.25' rx='1.125' fill='none' className={filledClassName} />
|
|
83
|
+
<path d='M19.75 16.25H23.7502' stroke='none' strokeWidth={2} strokeLinecap='round' />
|
|
84
|
+
<path d='M19.75 20.375H23.7502' stroke='none' strokeWidth={2} strokeLinecap='round' />
|
|
85
|
+
<path d='M19.75 23.75H21.25' stroke='none' strokeWidth={2} strokeLinecap='round' />
|
|
86
|
+
<rect x='16' y='22.625' width='2.25' height='2.25' rx='1.125' fill='none' className={filledClassName} />
|
|
89
87
|
</svg>
|
|
90
88
|
)
|
|
91
89
|
break
|