@platformatic/ui-components 0.1.44 → 0.1.45
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/main.css +4 -0
- package/package.json +1 -1
- package/src/components/Button.jsx +9 -5
- package/src/components/Button.module.css +29 -2
- package/src/components/Sidebar.jsx +1 -1
- package/src/components/icons/DynamicWorkspaceIcon.jsx +125 -0
- package/src/components/icons/StaticWorkspaceIcon.jsx +119 -0
- package/src/components/icons/index.js +4 -4
- package/src/stories/Button.stories.jsx +4 -3
- package/src/stories/Sidebar.stories.jsx +2 -2
- package/src/stories/icons/Icons.stories.jsx +29 -0
- package/tailwind.config.cjs +9 -1
- package/src/components/icons/PuzzleDynamicIcon.jsx +0 -69
- package/src/components/icons/PuzzleIcon.jsx +0 -65
package/dist/main.css
CHANGED
|
@@ -675,6 +675,10 @@ video {
|
|
|
675
675
|
color: rgb(2 120 63 / var(--tw-text-opacity));
|
|
676
676
|
}
|
|
677
677
|
|
|
678
|
+
.underline {
|
|
679
|
+
text-decoration-line: underline;
|
|
680
|
+
}
|
|
681
|
+
|
|
678
682
|
.blur {
|
|
679
683
|
--tw-blur: blur(8px);
|
|
680
684
|
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
package/package.json
CHANGED
|
@@ -5,13 +5,17 @@ import styles from './Button.module.css'
|
|
|
5
5
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
|
6
6
|
|
|
7
7
|
function Button (props) {
|
|
8
|
-
const { icon, label, color, backgroundColor, size, disabled, bold,
|
|
8
|
+
const { icon, label, color, backgroundColor, size, disabled, bold, hoverEffect, bordered, ...rest } = props
|
|
9
9
|
let className = `${styles.button} ${styles['background-color-' + backgroundColor]} ${styles['color-' + color]} ${styles['button-' + size]}`
|
|
10
10
|
if (!bordered) className += ` ${styles['no-border']}`
|
|
11
11
|
if (disabled) {
|
|
12
12
|
className += ` ${styles.disabled}`
|
|
13
13
|
} else {
|
|
14
|
-
if (
|
|
14
|
+
if (hoverEffect === 'hover') {
|
|
15
|
+
className += ` ${styles['hover-' + backgroundColor]}`
|
|
16
|
+
} else {
|
|
17
|
+
className += ` ${styles['underline-effect']}`
|
|
18
|
+
}
|
|
15
19
|
}
|
|
16
20
|
if (bold) className += ` ${styles.fontBold}`
|
|
17
21
|
|
|
@@ -53,9 +57,9 @@ Button.propTypes = {
|
|
|
53
57
|
*/
|
|
54
58
|
bold: PropTypes.bool,
|
|
55
59
|
/**
|
|
56
|
-
*
|
|
60
|
+
* Effect on hover
|
|
57
61
|
*/
|
|
58
|
-
|
|
62
|
+
hoverEffect: PropTypes.oneOf(['hover', 'underline']),
|
|
59
63
|
/**
|
|
60
64
|
* Apply border: default true
|
|
61
65
|
*/
|
|
@@ -68,7 +72,7 @@ Button.defaultProps = {
|
|
|
68
72
|
disabled: false,
|
|
69
73
|
size: 'large',
|
|
70
74
|
bold: false,
|
|
71
|
-
|
|
75
|
+
hoverEffect: 'hover',
|
|
72
76
|
bordered: true
|
|
73
77
|
}
|
|
74
78
|
|
|
@@ -39,10 +39,10 @@
|
|
|
39
39
|
.background-color-main-dark-blue{
|
|
40
40
|
@apply bg-main-dark-blue !important;
|
|
41
41
|
}
|
|
42
|
-
.background-color-dark-blue{
|
|
42
|
+
.background-color-dark-blue {
|
|
43
43
|
@apply bg-dark-blue !important;
|
|
44
44
|
}
|
|
45
|
-
.background-color-light-blue{
|
|
45
|
+
.background-color-light-blue {
|
|
46
46
|
@apply bg-light-blue !important;
|
|
47
47
|
}
|
|
48
48
|
.background-color-white{
|
|
@@ -93,6 +93,33 @@
|
|
|
93
93
|
.disabled {
|
|
94
94
|
@apply opacity-30 cursor-default;
|
|
95
95
|
}
|
|
96
|
+
.hover-main-green {
|
|
97
|
+
@apply hover:shadow-main-green;
|
|
98
|
+
}
|
|
99
|
+
.hover-light-green {
|
|
100
|
+
@apply hover:shadow-light-green;
|
|
101
|
+
}
|
|
102
|
+
.hover-dark-green {
|
|
103
|
+
@apply hover:shadow-dark-green;
|
|
104
|
+
}
|
|
105
|
+
.hover-main-dark-blue {
|
|
106
|
+
@apply hover:shadow-main-dark-blue;
|
|
107
|
+
}
|
|
108
|
+
.hover-dark-blue {
|
|
109
|
+
@apply hover:shadow-dark-blue;
|
|
110
|
+
}
|
|
111
|
+
.hover-light-blue {
|
|
112
|
+
@apply hover:shadow-light-blue;
|
|
113
|
+
}
|
|
114
|
+
.hover-white{
|
|
115
|
+
@apply hover:shadow-wrap;
|
|
116
|
+
}
|
|
117
|
+
.hover-error-red {
|
|
118
|
+
@apply hover:shadow-error-red;
|
|
119
|
+
}
|
|
120
|
+
.hover-tertiary-blue {
|
|
121
|
+
@apply hover:shadow-tertiary-blue;
|
|
122
|
+
}
|
|
96
123
|
.underline-effect {
|
|
97
124
|
@apply hover:underline;
|
|
98
125
|
}
|
|
@@ -42,7 +42,7 @@ function Sidebar (props) {
|
|
|
42
42
|
? (
|
|
43
43
|
<>
|
|
44
44
|
<button type='button' className={styles.buttonExpand} onClick={() => { setCollapsed(false) }}>
|
|
45
|
-
<Icons.
|
|
45
|
+
<Icons.StaticWorkspaceIcon color='white' />
|
|
46
46
|
</button>
|
|
47
47
|
<div className={styles.titleCollapsed} data-testid='lateral-bar-title'>
|
|
48
48
|
{title}
|
|
@@ -0,0 +1,125 @@
|
|
|
1
|
+
import * as React from 'react'
|
|
2
|
+
import styles from './Icons.module.css'
|
|
3
|
+
|
|
4
|
+
const DynamicWorkspaceIcon = ({ color = 'green', size = 'normal', tip = '' }) => {
|
|
5
|
+
const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
|
|
6
|
+
let icon = (
|
|
7
|
+
<svg
|
|
8
|
+
width={40}
|
|
9
|
+
height={40}
|
|
10
|
+
viewBox='0 0 40 40'
|
|
11
|
+
fill='none'
|
|
12
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
13
|
+
className={className}
|
|
14
|
+
data-tip={tip}
|
|
15
|
+
>
|
|
16
|
+
<rect
|
|
17
|
+
x={5}
|
|
18
|
+
y={5}
|
|
19
|
+
width={10}
|
|
20
|
+
height={12.5874}
|
|
21
|
+
rx={1}
|
|
22
|
+
stroke='none'
|
|
23
|
+
strokeWidth={2}
|
|
24
|
+
/>
|
|
25
|
+
<path
|
|
26
|
+
d='M20 5L27.5 11.25L20 17.5V5Z'
|
|
27
|
+
stroke='none'
|
|
28
|
+
strokeWidth={2}
|
|
29
|
+
strokeLinecap='round'
|
|
30
|
+
strokeLinejoin='round'
|
|
31
|
+
/>
|
|
32
|
+
<rect
|
|
33
|
+
x={35}
|
|
34
|
+
y={35}
|
|
35
|
+
width={10}
|
|
36
|
+
height={12.5874}
|
|
37
|
+
rx={1}
|
|
38
|
+
transform='rotate(-180 35 35)'
|
|
39
|
+
stroke='none'
|
|
40
|
+
strokeWidth={2}
|
|
41
|
+
/>
|
|
42
|
+
<rect
|
|
43
|
+
x={20}
|
|
44
|
+
y={35}
|
|
45
|
+
width={15}
|
|
46
|
+
height={12.5874}
|
|
47
|
+
rx={1}
|
|
48
|
+
transform='rotate(-180 20 35)'
|
|
49
|
+
stroke='none'
|
|
50
|
+
strokeWidth={2}
|
|
51
|
+
/>
|
|
52
|
+
<path
|
|
53
|
+
d='M27.5 15V17.5L35 11.25L27.5 5V7.5'
|
|
54
|
+
stroke='none'
|
|
55
|
+
strokeWidth={2}
|
|
56
|
+
strokeLinecap='round'
|
|
57
|
+
strokeLinejoin='round'
|
|
58
|
+
/>
|
|
59
|
+
</svg>
|
|
60
|
+
)
|
|
61
|
+
switch (size) {
|
|
62
|
+
case 'small':
|
|
63
|
+
icon = (
|
|
64
|
+
<svg
|
|
65
|
+
width={24}
|
|
66
|
+
height={25}
|
|
67
|
+
viewBox='0 0 24 25'
|
|
68
|
+
fill='none'
|
|
69
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
70
|
+
className={className}
|
|
71
|
+
data-tip={tip}
|
|
72
|
+
>
|
|
73
|
+
<rect
|
|
74
|
+
x={3}
|
|
75
|
+
y={3.5}
|
|
76
|
+
width={6}
|
|
77
|
+
height={7.55245}
|
|
78
|
+
rx={1}
|
|
79
|
+
stroke='none'
|
|
80
|
+
strokeWidth={1.5}
|
|
81
|
+
/>
|
|
82
|
+
<path
|
|
83
|
+
d='M12 3.5L16.5 7.25L12 11V3.5Z'
|
|
84
|
+
stroke='none'
|
|
85
|
+
strokeWidth={1.5}
|
|
86
|
+
strokeLinecap='round'
|
|
87
|
+
strokeLinejoin='round'
|
|
88
|
+
/>
|
|
89
|
+
<rect
|
|
90
|
+
x={21}
|
|
91
|
+
y={21.5}
|
|
92
|
+
width={6}
|
|
93
|
+
height={7.55245}
|
|
94
|
+
rx={1}
|
|
95
|
+
transform='rotate(-180 21 21.5)'
|
|
96
|
+
stroke='none'
|
|
97
|
+
strokeWidth={1.5}
|
|
98
|
+
/>
|
|
99
|
+
<rect
|
|
100
|
+
x={12}
|
|
101
|
+
y={21.5}
|
|
102
|
+
width={9}
|
|
103
|
+
height={7.55245}
|
|
104
|
+
rx={1}
|
|
105
|
+
transform='rotate(-180 12 21.5)'
|
|
106
|
+
stroke='none'
|
|
107
|
+
strokeWidth={1.5}
|
|
108
|
+
/>
|
|
109
|
+
<path
|
|
110
|
+
d='M16.5 9.5V11L21 7.25L16.5 3.5V5'
|
|
111
|
+
stroke='none'
|
|
112
|
+
strokeWidth={1.5}
|
|
113
|
+
strokeLinecap='round'
|
|
114
|
+
strokeLinejoin='round'
|
|
115
|
+
/>
|
|
116
|
+
</svg>
|
|
117
|
+
)
|
|
118
|
+
break
|
|
119
|
+
default:
|
|
120
|
+
break
|
|
121
|
+
}
|
|
122
|
+
return icon
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
export default DynamicWorkspaceIcon
|
|
@@ -0,0 +1,119 @@
|
|
|
1
|
+
import * as React from 'react'
|
|
2
|
+
import styles from './Icons.module.css'
|
|
3
|
+
|
|
4
|
+
const StaticWorkspaceIcon = ({
|
|
5
|
+
color = 'green',
|
|
6
|
+
size = 'normal',
|
|
7
|
+
tip = ''
|
|
8
|
+
}) => {
|
|
9
|
+
const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
|
|
10
|
+
let icon = (
|
|
11
|
+
<svg
|
|
12
|
+
width={40}
|
|
13
|
+
height={41}
|
|
14
|
+
viewBox='0 0 40 41'
|
|
15
|
+
fill='none'
|
|
16
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
17
|
+
className={className}
|
|
18
|
+
data-tip={tip}
|
|
19
|
+
>
|
|
20
|
+
<rect
|
|
21
|
+
x={5}
|
|
22
|
+
y={5.33325}
|
|
23
|
+
width={10}
|
|
24
|
+
height={12.5874}
|
|
25
|
+
rx={1}
|
|
26
|
+
stroke='none'
|
|
27
|
+
strokeWidth={2.5}
|
|
28
|
+
/>
|
|
29
|
+
<rect
|
|
30
|
+
x={20}
|
|
31
|
+
y={5.33325}
|
|
32
|
+
width={15}
|
|
33
|
+
height={12.5874}
|
|
34
|
+
rx={1}
|
|
35
|
+
stroke='none'
|
|
36
|
+
strokeWidth={2.5}
|
|
37
|
+
/>
|
|
38
|
+
<rect
|
|
39
|
+
x={35}
|
|
40
|
+
y={35.3333}
|
|
41
|
+
width={10}
|
|
42
|
+
height={12.5874}
|
|
43
|
+
rx={1}
|
|
44
|
+
transform='rotate(-180 35 35.3333)'
|
|
45
|
+
stroke='none'
|
|
46
|
+
strokeWidth={2.5}
|
|
47
|
+
/>
|
|
48
|
+
<rect
|
|
49
|
+
x={20}
|
|
50
|
+
y={35.3333}
|
|
51
|
+
width={15}
|
|
52
|
+
height={12.5874}
|
|
53
|
+
rx={1}
|
|
54
|
+
transform='rotate(-180 20 35.3333)'
|
|
55
|
+
stroke='none'
|
|
56
|
+
strokeWidth={2.5}
|
|
57
|
+
/>
|
|
58
|
+
</svg>
|
|
59
|
+
)
|
|
60
|
+
switch (size) {
|
|
61
|
+
case 'small':
|
|
62
|
+
icon = (
|
|
63
|
+
<svg
|
|
64
|
+
width={24}
|
|
65
|
+
height={25}
|
|
66
|
+
viewBox='0 0 24 25'
|
|
67
|
+
fill='none'
|
|
68
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
69
|
+
className={className}
|
|
70
|
+
data-tip={tip}
|
|
71
|
+
>
|
|
72
|
+
<rect
|
|
73
|
+
x={3}
|
|
74
|
+
y={3.5}
|
|
75
|
+
width={6}
|
|
76
|
+
height={7.55245}
|
|
77
|
+
rx={1}
|
|
78
|
+
stroke='none'
|
|
79
|
+
strokeWidth={1.5}
|
|
80
|
+
/>
|
|
81
|
+
<rect
|
|
82
|
+
x={12}
|
|
83
|
+
y={3.5}
|
|
84
|
+
width={9}
|
|
85
|
+
height={7.55245}
|
|
86
|
+
rx={1}
|
|
87
|
+
stroke='none'
|
|
88
|
+
strokeWidth={1.5}
|
|
89
|
+
/>
|
|
90
|
+
<rect
|
|
91
|
+
x={21}
|
|
92
|
+
y={21.5}
|
|
93
|
+
width={6}
|
|
94
|
+
height={7.55245}
|
|
95
|
+
rx={1}
|
|
96
|
+
transform='rotate(-180 21 21.5)'
|
|
97
|
+
stroke='none'
|
|
98
|
+
strokeWidth={1.5}
|
|
99
|
+
/>
|
|
100
|
+
<rect
|
|
101
|
+
x={12}
|
|
102
|
+
y={21.5}
|
|
103
|
+
width={9}
|
|
104
|
+
height={7.55245}
|
|
105
|
+
rx={1}
|
|
106
|
+
transform='rotate(-180 12 21.5)'
|
|
107
|
+
stroke='none'
|
|
108
|
+
strokeWidth={1.5}
|
|
109
|
+
/>
|
|
110
|
+
</svg>
|
|
111
|
+
)
|
|
112
|
+
break
|
|
113
|
+
default:
|
|
114
|
+
break
|
|
115
|
+
}
|
|
116
|
+
return icon
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
export default StaticWorkspaceIcon
|
|
@@ -10,8 +10,8 @@ import CircleCloseHoverIcon from './CircleCloseHoverIcon'
|
|
|
10
10
|
import CloseIcon from './CloseIcon'
|
|
11
11
|
import GearIcon from './GearIcon'
|
|
12
12
|
import MetricsIcon from './MetricsIcon'
|
|
13
|
-
import
|
|
14
|
-
import
|
|
13
|
+
import DynamicWorkspaceIcon from './DynamicWorkspaceIcon'
|
|
14
|
+
import StaticWorkspaceIcon from './StaticWorkspaceIcon'
|
|
15
15
|
import PullRequestIcon from './PullRequestIcon'
|
|
16
16
|
import TriangleExclamationIcon from './TriangleExclamationIcon'
|
|
17
17
|
|
|
@@ -28,8 +28,8 @@ export default {
|
|
|
28
28
|
CloseIcon,
|
|
29
29
|
GearIcon,
|
|
30
30
|
MetricsIcon,
|
|
31
|
-
|
|
32
|
-
|
|
31
|
+
DynamicWorkspaceIcon,
|
|
32
|
+
StaticWorkspaceIcon,
|
|
33
33
|
PullRequestIcon,
|
|
34
34
|
TriangleExclamationIcon
|
|
35
35
|
}
|
|
@@ -40,8 +40,9 @@ export default {
|
|
|
40
40
|
options: ['small', 'medium', 'large', 'extra-large']
|
|
41
41
|
}
|
|
42
42
|
},
|
|
43
|
-
|
|
44
|
-
type: '
|
|
43
|
+
hoverEffect: {
|
|
44
|
+
type: 'radio',
|
|
45
|
+
options: ['hover', 'underline']
|
|
45
46
|
},
|
|
46
47
|
bordered: {
|
|
47
48
|
type: 'boolean'
|
|
@@ -55,7 +56,7 @@ export const OnlyLabel = Template.bind({})
|
|
|
55
56
|
// More on args: https://storybook.js.org/docs/react/writing-stories/args
|
|
56
57
|
OnlyLabel.args = {
|
|
57
58
|
label: 'Sample label',
|
|
58
|
-
backgroundColor: '
|
|
59
|
+
backgroundColor: 'main-green'
|
|
59
60
|
}
|
|
60
61
|
|
|
61
62
|
export const BorderedRed = Template.bind({})
|
|
@@ -36,9 +36,9 @@ EmptySidebar.args = {
|
|
|
36
36
|
|
|
37
37
|
const FullSidebarTemplate = (args) => {
|
|
38
38
|
const [items, setItems] = useState([
|
|
39
|
-
{ iconName: '
|
|
39
|
+
{ iconName: 'StaticWorkspaceIcon', subTitle: 'Subtitle', title: 'a very very very very very long title 1' },
|
|
40
40
|
{ title: 'Title number 2', subTitle: 'Subtitle 2' },
|
|
41
|
-
{ title: 'Another Title', subTitle: 'Subtitle 3', iconName: '
|
|
41
|
+
{ title: 'Another Title', subTitle: 'Subtitle 3', iconName: 'DynamicWorkspaceIcon' }
|
|
42
42
|
])
|
|
43
43
|
function onClickAdd () {
|
|
44
44
|
const tmpItem = items.map(item => item)
|
|
@@ -3,6 +3,8 @@ import PullRequestIcon from '../../components/icons/PullRequestIcon'
|
|
|
3
3
|
import CloseIcon from '../../components/icons/CloseIcon'
|
|
4
4
|
import CircleCloseIcon from '../../components/icons/CircleCloseIcon'
|
|
5
5
|
import TriangleExclamationIcon from '../../components/icons/TriangleExclamationIcon'
|
|
6
|
+
import StaticWorkspaceIcon from '../../components/icons/StaticWorkspaceIcon'
|
|
7
|
+
import DynamicWorkspaceIcon from '../../components/icons/DynamicWorkspaceIcon'
|
|
6
8
|
|
|
7
9
|
export default {
|
|
8
10
|
title: 'Platformatic/Icons',
|
|
@@ -33,3 +35,30 @@ CircleCloseIconDefault.args = {}
|
|
|
33
35
|
const TriangleExclamationIconTemplate = (args) => <TriangleExclamationIcon {...args} />
|
|
34
36
|
export const TriangleExclamationIconDefault = TriangleExclamationIconTemplate.bind({})
|
|
35
37
|
TriangleExclamationIconDefault.args = {}
|
|
38
|
+
|
|
39
|
+
const divStyle = {
|
|
40
|
+
display: 'flex',
|
|
41
|
+
width: '100%',
|
|
42
|
+
minHeight: '400px',
|
|
43
|
+
gap: '10px',
|
|
44
|
+
backgroundColor: 'white'
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
const WorkspaceIconsTemplate = () => (
|
|
48
|
+
<div style={divStyle}>
|
|
49
|
+
{
|
|
50
|
+
[<StaticWorkspaceIcon key='a' />, <DynamicWorkspaceIcon key='b' />].map((component, index) => {
|
|
51
|
+
const listElement = []
|
|
52
|
+
listElement.push(React.cloneElement(component, { key: `0${index}` }))
|
|
53
|
+
listElement.push(React.cloneElement(component, { key: `1${index}`, size: 'small', color: 'green' }))
|
|
54
|
+
listElement.push(React.cloneElement(component, { key: `2${index}`, color: 'red' }))
|
|
55
|
+
listElement.push(React.cloneElement(component, { key: `3${index}`, size: 'small', color: 'red' }))
|
|
56
|
+
listElement.push(React.cloneElement(component, { key: `4${index}`, color: 'main-dark-blue' }))
|
|
57
|
+
listElement.push(React.cloneElement(component, { key: `5${index}`, size: 'small', color: 'main-dark-blue' }))
|
|
58
|
+
return listElement
|
|
59
|
+
})
|
|
60
|
+
}
|
|
61
|
+
</div>)
|
|
62
|
+
|
|
63
|
+
export const WorkspaceIconsAll = WorkspaceIconsTemplate.bind({})
|
|
64
|
+
WorkspaceIconsAll.args = {}
|
package/tailwind.config.cjs
CHANGED
|
@@ -11,7 +11,15 @@ module.exports = {
|
|
|
11
11
|
// => @media (min-width: 1440px) { ... }
|
|
12
12
|
},
|
|
13
13
|
boxShadow: {
|
|
14
|
-
wrap: '0px 0px 20px rgba(0, 0, 0, 0.6)'
|
|
14
|
+
wrap: '0px 0px 20px rgba(0, 0, 0, 0.6)',
|
|
15
|
+
'main-green': '0px 0px 10px rgba(33, 250, 144, 0.5)',
|
|
16
|
+
'dark-green': '0px 0px 10px rgba(2, 120, 63, 1)',
|
|
17
|
+
'light-green': '0px 0px 10px rgba(33, 241, 144, 0.5)',
|
|
18
|
+
'main-dark-blue': '0px 0px 10px rgba(33, 250, 144, 0.5)',
|
|
19
|
+
'dark-blue': '0px 0px 10px rgba(0, 52, 79, 0.5)',
|
|
20
|
+
'light-blue': '0px 0px 10px rgba(233, 247, 255, 0.5)',
|
|
21
|
+
'error-red': '0px 0px 10px rgba(250, 33, 33, 0.5)',
|
|
22
|
+
'tertiary-blue': '0px 0px 10px rgba(37, 136, 228, 0.5)'
|
|
15
23
|
}
|
|
16
24
|
},
|
|
17
25
|
colors: {
|
|
@@ -1,69 +0,0 @@
|
|
|
1
|
-
import * as React from 'react'
|
|
2
|
-
import styles from './Icons.module.css'
|
|
3
|
-
const PuzzleDynamicIcon = ({ color = 'green', size = 'normal' }) => {
|
|
4
|
-
const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
|
|
5
|
-
let dimension = 33
|
|
6
|
-
switch (size) {
|
|
7
|
-
case 'small':
|
|
8
|
-
dimension = 24
|
|
9
|
-
break
|
|
10
|
-
default:
|
|
11
|
-
break
|
|
12
|
-
}
|
|
13
|
-
return (
|
|
14
|
-
<svg
|
|
15
|
-
width={dimension}
|
|
16
|
-
height={dimension}
|
|
17
|
-
viewBox='0 0 32 33'
|
|
18
|
-
fill='none'
|
|
19
|
-
xmlns='http://www.w3.org/2000/svg'
|
|
20
|
-
className={className}
|
|
21
|
-
>
|
|
22
|
-
<rect
|
|
23
|
-
x={4}
|
|
24
|
-
y={4.83325}
|
|
25
|
-
width={8}
|
|
26
|
-
height={10.0699}
|
|
27
|
-
rx={1}
|
|
28
|
-
stroke='none'
|
|
29
|
-
strokeWidth={1.5}
|
|
30
|
-
/>
|
|
31
|
-
<path
|
|
32
|
-
d='M16 4.83325L22 9.83325L16 14.8333V4.83325Z'
|
|
33
|
-
stroke='none'
|
|
34
|
-
strokeWidth={2}
|
|
35
|
-
strokeLinecap='round'
|
|
36
|
-
strokeLinejoin='round'
|
|
37
|
-
/>
|
|
38
|
-
<rect
|
|
39
|
-
x={28}
|
|
40
|
-
y={28.8333}
|
|
41
|
-
width={8}
|
|
42
|
-
height={10.0699}
|
|
43
|
-
rx={1}
|
|
44
|
-
transform='rotate(-180 28 28.8333)'
|
|
45
|
-
stroke='none'
|
|
46
|
-
strokeWidth={1.5}
|
|
47
|
-
/>
|
|
48
|
-
<rect
|
|
49
|
-
x={16}
|
|
50
|
-
y={28.8333}
|
|
51
|
-
width={12}
|
|
52
|
-
height={10.0699}
|
|
53
|
-
rx={1}
|
|
54
|
-
transform='rotate(-180 16 28.8333)'
|
|
55
|
-
stroke='none'
|
|
56
|
-
strokeWidth={1.5}
|
|
57
|
-
/>
|
|
58
|
-
<path
|
|
59
|
-
d='M22 12.8333V14.8333L28 9.83325L22 4.83325V6.83325'
|
|
60
|
-
stroke='none'
|
|
61
|
-
strokeWidth={1.5}
|
|
62
|
-
strokeLinecap='round'
|
|
63
|
-
strokeLinejoin='round'
|
|
64
|
-
/>
|
|
65
|
-
</svg>
|
|
66
|
-
)
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
export default PuzzleDynamicIcon
|
|
@@ -1,65 +0,0 @@
|
|
|
1
|
-
import * as React from 'react'
|
|
2
|
-
import styles from './Icons.module.css'
|
|
3
|
-
const PuzzleIcon = ({ color = 'green', size = 'normal', tip = '' }) => {
|
|
4
|
-
const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
|
|
5
|
-
let dimension = 33
|
|
6
|
-
switch (size) {
|
|
7
|
-
case 'small':
|
|
8
|
-
dimension = 24
|
|
9
|
-
break
|
|
10
|
-
default:
|
|
11
|
-
break
|
|
12
|
-
}
|
|
13
|
-
return (
|
|
14
|
-
<svg
|
|
15
|
-
width={dimension}
|
|
16
|
-
height={dimension}
|
|
17
|
-
viewBox='0 0 33 32'
|
|
18
|
-
fill='none'
|
|
19
|
-
xmlns='http://www.w3.org/2000/svg'
|
|
20
|
-
className={className}
|
|
21
|
-
data-tip={tip}
|
|
22
|
-
>
|
|
23
|
-
<rect
|
|
24
|
-
x={4.5}
|
|
25
|
-
y={4}
|
|
26
|
-
width={8}
|
|
27
|
-
height={10.0699}
|
|
28
|
-
rx={1}
|
|
29
|
-
stroke='none'
|
|
30
|
-
strokeWidth={1.5}
|
|
31
|
-
/>
|
|
32
|
-
<rect
|
|
33
|
-
x={16.5}
|
|
34
|
-
y={4}
|
|
35
|
-
width={12}
|
|
36
|
-
height={10.0699}
|
|
37
|
-
rx={1}
|
|
38
|
-
stroke='none'
|
|
39
|
-
strokeWidth={1.5}
|
|
40
|
-
/>
|
|
41
|
-
<rect
|
|
42
|
-
x={28.5}
|
|
43
|
-
y={28}
|
|
44
|
-
width={8}
|
|
45
|
-
height={10.0699}
|
|
46
|
-
rx={1}
|
|
47
|
-
transform='rotate(-180 28.5 28)'
|
|
48
|
-
stroke='none'
|
|
49
|
-
strokeWidth={1.5}
|
|
50
|
-
/>
|
|
51
|
-
<rect
|
|
52
|
-
x={16.5}
|
|
53
|
-
y={28}
|
|
54
|
-
width={12}
|
|
55
|
-
height={10.0699}
|
|
56
|
-
rx={1}
|
|
57
|
-
transform='rotate(-180 16.5 28)'
|
|
58
|
-
stroke='none'
|
|
59
|
-
strokeWidth={1.5}
|
|
60
|
-
/>
|
|
61
|
-
</svg>
|
|
62
|
-
)
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
export default PuzzleIcon
|