@platformatic/ui-components 0.1.49 → 0.1.51

package/src/components/icons/StopIcon.jsx

@@ -1,21 +1,21 @@
-import * as React from 'react'
-import styles from './Icons.module.css'
-const StopIcon = ({ color = 'green', size = 'normal' }) => {
-  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
-  let icon = <></>
-  switch (size) {
-    case 'small':
-      icon = (
-        <svg width={16} height={16} viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg' className={className}>
-          <circle cx={8} cy={8} r={6} stroke='none' />
-          <path d='M3.5 12L12 3.5' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
-        </svg>
-      )
-      break
-    default:
-      break
-  }
-  return icon
-}
-
-export default StopIcon
+import * as React from 'react'
+import styles from './Icons.module.css'
+const StopIcon = ({ color = 'green', size = 'normal' }) => {
+  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
+  let icon = <></>
+  switch (size) {
+    case 'small':
+      icon = (
+        <svg width={16} height={16} viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg' className={className}>
+          <circle cx={8} cy={8} r={6} stroke='none' />
+          <path d='M3.5 12L12 3.5' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+        </svg>
+      )
+      break
+    default:
+      break
+  }
+  return icon
+}
+
+export default StopIcon

package/src/components/icons/TerminalIcon.jsx

@@ -1,22 +1,22 @@
-import * as React from 'react'
-import styles from './Icons.module.css'
-const TerminalIcon = ({ color = 'green', size = 'normal' }) => {
-  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
-  let icon = <></>
-  switch (size) {
-    case 'small':
-      icon = (
-        <svg width={16} height={16} viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg' className={className}>
-          <rect x={2} y={2} width={12} height={12} rx={1} stroke='none' />
-          <path d='M4 9L6 7L4 5' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
-          <path d='M7 11H11.5' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
-        </svg>
-      )
-      break
-    default:
-      break
-  }
-  return icon
-}
-
-export default TerminalIcon
+import * as React from 'react'
+import styles from './Icons.module.css'
+const TerminalIcon = ({ color = 'green', size = 'normal' }) => {
+  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
+  let icon = <></>
+  switch (size) {
+    case 'small':
+      icon = (
+        <svg width={16} height={16} viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg' className={className}>
+          <rect x={2} y={2} width={12} height={12} rx={1} stroke='none' />
+          <path d='M4 9L6 7L4 5' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M7 11H11.5' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+        </svg>
+      )
+      break
+    default:
+      break
+  }
+  return icon
+}
+
+export default TerminalIcon

package/src/components/icons/UpgradeIcon.jsx

@@ -1,48 +1,48 @@
-import * as React from 'react'
-import styles from './Icons.module.css'
-
-const UpgradeIcon = ({ color = 'green', size = 'normal' }) => {
-  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
-  let icon = <></>
-  switch (size) {
-    case 'extra-large':
-      icon = (
-        <svg
-          width={120}
-          height={120}
-          viewBox='0 0 120 120'
-          fill='none'
-          xmlns='http://www.w3.org/2000/svg'
-          className={className}
-        >
-          <path
-            d='M73.5692 71.2499C70.4961 74.9505 65.8773 77.3043 60.7127 77.3043C55.2863 77.3043 50.4624 74.7057 47.4009 70.6768'
-            stroke='none'
-            strokeWidth={6.5}
-            strokeLinecap='round'
-            strokeLinejoin='round'
-          />
-          <path
-            d='M23.2957 51.3793L17.6102 51.3793C16.1675 51.3793 15 52.5551 15 54.0082L15 66.8661C15 68.3192 16.1675 69.495 17.6102 69.495L23.2957 69.495C24.3778 69.495 25.3554 70.1738 25.7351 71.1967L28.4782 78.5003C28.8483 79.4946 28.5921 80.6226 27.8138 81.3491L24.074 84.8576C22.973 85.89 22.973 87.649 24.0645 88.691L32.9677 97.161C33.9549 98.1074 35.5115 98.117 36.5176 97.1897L41.4343 92.6775C42.2126 91.97 43.3326 91.7884 44.2913 92.2377L50.8405 95.2968C51.7707 95.727 52.3592 96.6639 52.3592 97.6868L52.3592 102.371C52.3592 103.824 53.5267 105 54.9694 105L65.9608 105C67.4035 105 68.571 103.824 68.571 102.371L68.571 97.4573C68.571 96.3197 69.3018 95.3064 70.3744 94.9527L77.9393 92.4671C78.8315 92.1804 79.8091 92.3907 80.502 93.0216L84.9346 97.0654C86.0167 98.05 87.6967 97.9545 88.6553 96.8455L96.7517 87.5247C97.6819 86.4541 97.5965 84.8289 96.5619 83.8634L93.088 80.613C92.3191 79.9056 92.0534 78.8062 92.3951 77.8216L94.749 71.0342C95.1192 69.973 96.1063 69.2656 97.2168 69.2656L102.39 69.2656C103.833 69.2656 105 68.0898 105 66.6367L105 54.2472C105 52.7941 103.833 51.6183 102.39 51.6183L97.2168 51.6183'
-            stroke='none'
-            strokeWidth={6.5}
-            strokeLinecap='round'
-            strokeLinejoin='round'
-          />
-          <path
-            d='M59.1684 15.3455L37.5 36.8033L48.75 36.8034L48.75 60.1728L71.25 60.1728L71.25 37.7592L82.5 37.7592L59.1684 15.3455Z'
-            stroke='none'
-            strokeWidth={6.5}
-            strokeLinecap='round'
-            strokeLinejoin='round'
-          />
-        </svg>
-      )
-      break
-    default:
-      break
-  }
-  return icon
-}
-
-export default UpgradeIcon
+import * as React from 'react'
+import styles from './Icons.module.css'
+
+const UpgradeIcon = ({ color = 'green', size = 'normal' }) => {
+  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
+  let icon = <></>
+  switch (size) {
+    case 'extra-large':
+      icon = (
+        <svg
+          width={120}
+          height={120}
+          viewBox='0 0 120 120'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <path
+            d='M73.5692 71.2499C70.4961 74.9505 65.8773 77.3043 60.7127 77.3043C55.2863 77.3043 50.4624 74.7057 47.4009 70.6768'
+            stroke='none'
+            strokeWidth={6.5}
+            strokeLinecap='round'
+            strokeLinejoin='round'
+          />
+          <path
+            d='M23.2957 51.3793L17.6102 51.3793C16.1675 51.3793 15 52.5551 15 54.0082L15 66.8661C15 68.3192 16.1675 69.495 17.6102 69.495L23.2957 69.495C24.3778 69.495 25.3554 70.1738 25.7351 71.1967L28.4782 78.5003C28.8483 79.4946 28.5921 80.6226 27.8138 81.3491L24.074 84.8576C22.973 85.89 22.973 87.649 24.0645 88.691L32.9677 97.161C33.9549 98.1074 35.5115 98.117 36.5176 97.1897L41.4343 92.6775C42.2126 91.97 43.3326 91.7884 44.2913 92.2377L50.8405 95.2968C51.7707 95.727 52.3592 96.6639 52.3592 97.6868L52.3592 102.371C52.3592 103.824 53.5267 105 54.9694 105L65.9608 105C67.4035 105 68.571 103.824 68.571 102.371L68.571 97.4573C68.571 96.3197 69.3018 95.3064 70.3744 94.9527L77.9393 92.4671C78.8315 92.1804 79.8091 92.3907 80.502 93.0216L84.9346 97.0654C86.0167 98.05 87.6967 97.9545 88.6553 96.8455L96.7517 87.5247C97.6819 86.4541 97.5965 84.8289 96.5619 83.8634L93.088 80.613C92.3191 79.9056 92.0534 78.8062 92.3951 77.8216L94.749 71.0342C95.1192 69.973 96.1063 69.2656 97.2168 69.2656L102.39 69.2656C103.833 69.2656 105 68.0898 105 66.6367L105 54.2472C105 52.7941 103.833 51.6183 102.39 51.6183L97.2168 51.6183'
+            stroke='none'
+            strokeWidth={6.5}
+            strokeLinecap='round'
+            strokeLinejoin='round'
+          />
+          <path
+            d='M59.1684 15.3455L37.5 36.8033L48.75 36.8034L48.75 60.1728L71.25 60.1728L71.25 37.7592L82.5 37.7592L59.1684 15.3455Z'
+            stroke='none'
+            strokeWidth={6.5}
+            strokeLinecap='round'
+            strokeLinejoin='round'
+          />
+        </svg>
+      )
+      break
+    default:
+      break
+  }
+  return icon
+}
+
+export default UpgradeIcon

package/src/components/icons/Users2Icon.jsx

@@ -0,0 +1,84 @@
+import * as React from 'react'
+import PropTypes from 'prop-types'
+import styles from './Icons.module.css'
+
+const Users2Icon = ({ color, size }) => {
+  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
+  let icon = <></>
+
+  switch (size) {
+    case 'small':
+      icon = (
+        <svg
+          width={16}
+          height={16}
+          viewBox='0 0 16 16'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <path d='M6.00001 10C3.79087 10 2 11.4327 2 13.2H10C10 11.4327 8.20916 10 6.00001 10Z' stroke='none' strokeLinejoin='round' />
+          <circle cx={6.00011} cy={6.00001} r={2.40001} stroke='none' />
+          <path d='M9.19995 8.40002C11.8509 8.40002 14 9.83272 14 11.6H11' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M7.6001 2.61108C8.0247 2.23107 8.5854 2 9.20006 2C10.5255 2 11.6001 3.07452 11.6001 4.40001C11.6001 5.5467 10.7959 6.50556 9.72074 6.74338' stroke='none' strokeLinecap='round' />
+        </svg>
+      )
+      break
+    case 'normal':
+      icon = (
+        <svg
+          width={24}
+          height={24}
+          viewBox='0 0 24 24'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <path d='M9.00002 15C5.6863 15 3 17.1491 3 19.8001H15C15 17.1491 12.3137 15 9.00002 15Z' stroke='none' strokeWidth={1.5} strokeLinejoin='round' />
+          <circle cx={8.99991} cy={9.00002} r={3.60001} stroke='none' strokeWidth={1.5} />
+          <path d='M13.8 12.6C17.7765 12.6 21.0001 14.7491 21.0001 17.4001H16.5001' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M11.4001 3.91662C12.037 3.3466 12.8781 3 13.8001 3C15.7883 3 17.4001 4.61178 17.4001 6.60001C17.4001 8.32004 16.1938 9.75833 14.5811 10.1151' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
+        </svg>
+      )
+      break
+    case 'large':
+      icon = (
+        <svg
+          width={40}
+          height={40}
+          viewBox='0 0 40 40'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <path d='M15 25.0001C9.47717 25.0001 5 28.5818 5 33.0001H25.0001C25.0001 28.5818 20.5229 25.0001 15 25.0001Z' stroke='none' strokeWidth={2} strokeLinejoin='round' />
+          <circle cx='15' cy='15' r='6.00002' stroke='none' strokeWidth={2} />
+          <path d='M22.9998 21.0001C29.6272 21.0001 34.9998 24.5818 34.9998 29.0001H27.4999' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M19 6.5277C20.0615 5.57767 21.4632 5 22.9999 5C26.3136 5 28.9999 7.6863 28.9999 11C28.9999 13.8667 26.9895 16.2639 24.3016 16.8585' stroke='none' strokeWidth={2} strokeLinecap='round' />
+        </svg>
+      )
+      break
+
+    default:
+      break
+  }
+  return icon
+}
+
+Users2Icon.propTypes = {
+  /**
+   * color of text, icon and borders
+   */
+  color: PropTypes.oneOf(['green', 'white', 'main-dark-blue', 'red']),
+  /**
+   * Size
+   */
+  size: PropTypes.oneOf(['small', 'medium', 'large', 'extra-large'])
+}
+
+Users2Icon.defaultProps = {
+  color: 'main-dark-blue',
+  size: 'normal'
+}
+
+export default Users2Icon

package/src/components/icons/WorkspaceDynamicIcon.jsx

@@ -0,0 +1,87 @@
+import * as React from 'react'
+import PropTypes from 'prop-types'
+import styles from './Icons.module.css'
+
+const WorkspaceDynamicIcon = ({ color, size }) => {
+  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
+  let icon = <></>
+
+  switch (size) {
+    case 'small':
+      icon = (
+        <svg
+          width={16}
+          height={16}
+          viewBox='0 0 16 16'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <rect x={2} y={2} width={4} height={5.03497} rx={1} stroke='none' />
+          <path d='M8 2L11 4.5L8 7V2Z' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+          <rect x={14} y={14} width={4} height={5.03496} rx={1} transform='rotate(-180 14 14)' stroke='none' />
+          <rect x={8} y={14} width={6} height={5.03497} rx={1} transform='rotate(-180 8 14)' stroke='none' />
+          <path d='M11 6V7L14 4.5L11 2V3' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+        </svg>
+      )
+      break
+    case 'normal':
+      icon = (
+        <svg
+          width={24}
+          height={24}
+          viewBox='0 0 24 24'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <rect x={3} y={3} width={6} height={7.55245} rx={1} stroke='none' strokeWidth={1.5} />
+          <path d='M12 3L16.5 6.75L12 10.5V3Z' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+          <rect x={21} y={21} width={6} height={7.55245} rx={1} transform='rotate(-180 21 21)' stroke='none' strokeWidth={1.5} />
+          <rect x={12} y={21} width={9} height={7.55245} rx={1} transform='rotate(-180 12 21)' stroke='none' strokeWidth={1.5} />
+          <path d='M16.5 9V10.5L21 6.75L16.5 3V4.5' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+        </svg>
+      )
+      break
+    case 'large':
+      icon = (
+        <svg
+          width={40}
+          height={40}
+          viewBox='0 0 40 40'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <rect x={5} y={5} width={10} height={12.5874} rx={1} stroke='none' strokeWidth={2} />
+          <path d='M20 5L27.5 11.25L20 17.5V5Z' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+          <rect x={35} y={35} width={10} height={12.5874} rx={1} transform='rotate(-180 35 35)' stroke='none' strokeWidth={2} />
+          <rect x={20} y={35} width={15} height={12.5874} rx={1} transform='rotate(-180 20 35)' stroke='none' strokeWidth={2} />
+          <path d='M27.5 15V17.5L35 11.25L27.5 5V7.5' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+        </svg>
+      )
+      break
+
+    default:
+      break
+  }
+  return icon
+}
+
+WorkspaceDynamicIcon.propTypes = {
+  /**
+   * color of text, icon and borders
+   */
+  color: PropTypes.oneOf(['green', 'white', 'main-dark-blue', 'red']),
+  /**
+   * Size
+   */
+  size: PropTypes.oneOf(['small', 'medium', 'large', 'extra-large'])
+}
+
+WorkspaceDynamicIcon.defaultProps = {
+  color: 'main-dark-blue',
+  size: 'normal'
+}
+
+export default WorkspaceDynamicIcon

package/src/components/icons/WorkspaceReadyIcon.jsx

@@ -0,0 +1,144 @@
+import * as React from 'react'
+import PropTypes from 'prop-types'
+import styles from './Icons.module.css'
+
+const WorkspaceReadyIcon = ({ color, size }) => {
+  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
+  let icon = <></>
+
+  switch (size) {
+    case 'small':
+      icon = (
+        <svg
+          width={16}
+          height={16}
+          viewBox='0 0 16 16'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <rect x={2} y={2} width={5} height={5} rx={1} stroke='none' />
+          <rect x={6} y={14} width={4} height={5.03496} rx={1} transform='rotate(-180 6 14)' stroke='none' />
+          <rect x={14} y={14} width={6} height={5.03497} rx={1} transform='rotate(-180 14 14)' stroke='none' />
+          <circle cx={11.5} cy={4.5} r={2.5} stroke='none' />
+          <path d='M10.25 4.5L11.2917 5.33333L12.5 4.00001' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+
+        </svg>
+      )
+      break
+    case 'normal':
+      icon = (
+        <svg
+          width={24}
+          height={24}
+          viewBox='0 0 24 24'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <rect x={3} y={3} width={7.5} height={7.5} rx={1} stroke='none' strokeWidth={1.5} />
+          <rect x={9} y={21} width={6} height={7.55245} rx={1} transform='rotate(-180 9 21)' stroke='none' strokeWidth={1.5} />
+          <rect x={21} y={21} width={9} height={7.55245} rx={1} transform='rotate(-180 21 21)' stroke='none' strokeWidth={1.5} />
+          <circle cx={17.25} cy={6.75} r={3.75} stroke='none' strokeWidth={1.5} />
+          <path d='M15.375 6.75L16.9375 8L18.75 6.00002' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+        </svg>
+      )
+      break
+    case 'large':
+      icon = (
+        <svg
+          width={40}
+          height={40}
+          viewBox='0 0 40 40'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <rect x={5} y={5} width={12.5} height={12.5} rx={1} stroke='none' strokeWidth={2} />
+          <rect x={15} y={35} width={10} height={12.5874} rx={1} transform='rotate(-180 15 35)' stroke='none' strokeWidth={2} />
+          <rect x={35} y={35} width={15} height={12.5874} rx={1} transform='rotate(-180 35 35)' stroke='none' strokeWidth={2} />
+          <circle cx={28.75} cy={11.25} r={6.25} stroke='none' strokeWidth={2} />
+          <path d='M25.625 11.25L28.2292 13.3333L31.25 10' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+
+        </svg>
+      )
+      break
+    case 'extra-large':
+      icon = (
+        <svg
+          width={120}
+          height={120}
+          viewBox='0 0 120 120'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <rect
+            x={15}
+            y={15}
+            width={37.5}
+            height={37.5}
+            rx={1}
+            stroke='none'
+            strokeWidth={6.5}
+          />
+          <rect
+            x={45}
+            y={105}
+            width={30}
+            height={37.7622}
+            rx={1}
+            transform='rotate(-180 45 105)'
+            stroke='none'
+            strokeWidth={6.5}
+          />
+          <rect
+            x={105}
+            y={105}
+            width={45}
+            height={37.7622}
+            rx={1}
+            transform='rotate(-180 105 105)'
+            stroke='none'
+            strokeWidth={6.5}
+          />
+          <circle
+            cx={86.25}
+            cy={33.75}
+            r={18.75}
+            stroke='none'
+            strokeWidth={6.5}
+          />
+          <path
+            d='M76.875 33.7499L84.6875 39.9999L93.75 30'
+            stroke='none'
+            strokeWidth={6.5}
+            strokeLinecap='round'
+            strokeLinejoin='round'
+          />
+        </svg>
+      )
+      break
+    default:
+      break
+  }
+  return icon
+}
+
+WorkspaceReadyIcon.propTypes = {
+  /**
+   * color of text, icon and borders
+   */
+  color: PropTypes.oneOf(['green', 'white', 'main-dark-blue', 'red']),
+  /**
+   * Size
+   */
+  size: PropTypes.oneOf(['small', 'medium', 'large', 'extra-large'])
+}
+
+WorkspaceReadyIcon.defaultProps = {
+  color: 'main-dark-blue',
+  size: 'normal'
+}
+
+export default WorkspaceReadyIcon

package/src/components/icons/WorkspaceStaticIcon.jsx

@@ -0,0 +1,84 @@
+import * as React from 'react'
+import PropTypes from 'prop-types'
+import styles from './Icons.module.css'
+
+const WorkspaceStaticIcon = ({ color, size }) => {
+  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
+  let icon = <></>
+
+  switch (size) {
+    case 'small':
+      icon = (
+        <svg
+          width={16}
+          height={16}
+          viewBox='0 0 16 16'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <rect x={2} y={2} width={4} height={5.03497} rx={1} stroke='none' />
+          <rect x={8} y={2} width={6} height={5.03497} rx={1} stroke='none' />
+          <rect x={14} y={14} width={4} height={5.03496} rx={1} transform='rotate(-180 14 14)' stroke='none' />
+          <rect x={8} y={14} width={6} height={5.03497} rx={1} transform='rotate(-180 8 14)' stroke='none' />
+        </svg>
+      )
+      break
+    case 'normal':
+      icon = (
+        <svg
+          width={24}
+          height={24}
+          viewBox='0 0 24 24'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <rect x={3} y={3} width={6} height={7.55245} rx={1} stroke='none' strokeWidth={1.5} />
+          <rect x={12} y={3} width={9} height={7.55245} rx={1} stroke='none' strokeWidth={1.5} />
+          <rect x={21} y={21} width={6} height={7.55245} rx={1} transform='rotate(-180 21 21)' stroke='none' strokeWidth={1.5} />
+          <rect x={12} y={21} width={9} height={7.55245} rx={1} transform='rotate(-180 12 21)' stroke='none' strokeWidth={1.5} />
+        </svg>
+      )
+      break
+    case 'large':
+      icon = (
+        <svg
+          width={40}
+          height={40}
+          viewBox='0 0 40 40'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <rect x={5} y={5} width={10} height={12.5874} rx={1} stroke='none' strokeWidth={2} />
+          <rect x={20} y={5} width={15} height={12.5874} rx={1} stroke='none' strokeWidth={2} />
+          <rect x={35} y={35} width={10} height={12.5874} rx={1} transform='rotate(-180 35 35)' stroke='none' strokeWidth={2} />
+          <rect x={20} y={35} width={15} height={12.5874} rx={1} transform='rotate(-180 20 35)' stroke='none' strokeWidth={2} />
+        </svg>
+      )
+      break
+
+    default:
+      break
+  }
+  return icon
+}
+
+WorkspaceStaticIcon.propTypes = {
+  /**
+   * color of text, icon and borders
+   */
+  color: PropTypes.oneOf(['green', 'white', 'main-dark-blue', 'red']),
+  /**
+   * Size
+   */
+  size: PropTypes.oneOf(['small', 'medium', 'large', 'extra-large'])
+}
+
+WorkspaceStaticIcon.defaultProps = {
+  color: 'main-dark-blue',
+  size: 'normal'
+}
+
+export default WorkspaceStaticIcon