|
| 1 | +import * as React from 'react' |
| 2 | +import PropTypes from 'prop-types' |
| 3 | +import styles from './Icons.module.css' |
| 4 | +import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants' |
| 5 | + |
| 6 | +const PodSettingsIcon = ({ |
| 7 | + color = MAIN_DARK_BLUE, |
| 8 | + size = MEDIUM, |
| 9 | + disabled = false, |
| 10 | + inactive = false |
| 11 | +}) => { |
| 12 | + let className = `${styles.svgClassName} ` + styles[`${color}`] |
| 13 | + if (disabled) { |
| 14 | + className += ` ${styles.iconDisabled}` |
| 15 | + } |
| 16 | + if (inactive) { |
| 17 | + className += ` ${styles.iconInactive}` |
| 18 | + } |
| 19 | + let icon = <></> |
| 20 | + const filledClassName = styles[`filled-${color}`] |
| 21 | + |
| 22 | + switch (size) { |
| 23 | + case SMALL: |
| 24 | + icon = ( |
| 25 | + <svg |
| 26 | + width={16} |
| 27 | + height={16} |
| 28 | + viewBox='0 0 16 16' |
| 29 | + fill='none' |
| 30 | + xmlns='http://www.w3.org/2000/svg' |
| 31 | + className={className} |
| 32 | + > |
| 33 | + <path d='M4 12.5L2.80371 11V5L7.99986 2L13.196 5V6.5' stroke='none' strokeLinecap='round' strokeLinejoin='round' /> |
| 34 | + <path d='M9.00062 11.5524C9.83707 11.5524 10.5152 10.8857 10.5152 10.0632C10.5152 9.24081 9.83707 8.5741 9.00062 8.5741C8.16416 8.5741 7.48608 9.24081 7.48608 10.0632C7.48608 10.8857 8.16416 11.5524 9.00062 11.5524Z' stroke='none' strokeLinecap='round' strokeLinejoin='round' /> |
| 35 | + <path d='M9.81304 6.23202V6.7374C9.81304 6.83358 9.87397 6.92048 9.96578 6.95423L10.6214 7.19806C10.7106 7.23096 10.8119 7.20818 10.8771 7.139L11.192 6.80658C11.2847 6.70871 11.4426 6.70787 11.5361 6.80574L12.2964 7.59713C12.3813 7.68572 12.3822 7.82324 12.2989 7.91268L11.8939 8.34972C11.8296 8.4189 11.8141 8.5193 11.8544 8.60367L12.129 9.18583C12.1676 9.26767 12.2517 9.32082 12.3436 9.32082H12.764C12.8945 9.32082 13 9.42459 13 9.55284V10.5298C13 10.6581 12.8945 10.7619 12.764 10.7619H12.3221C12.22 10.7619 12.129 10.8268 12.0973 10.9222L11.8742 11.5946C11.8476 11.6739 11.8665 11.7608 11.924 11.8224L12.2869 12.2164C12.3753 12.3126 12.3667 12.4619 12.2672 12.5471L11.4305 13.2668C11.3344 13.3495 11.1886 13.3419 11.1019 13.2499L10.8101 12.9412C10.7466 12.8737 10.648 12.8492 10.5596 12.8796L9.95034 13.0888C9.85509 13.1217 9.79159 13.2095 9.79159 13.3082V13.768C9.79159 13.8962 9.68604 14 9.55561 14H8.44353C8.3131 14 8.20755 13.8962 8.20755 13.768V13.3082C8.20755 13.2095 8.14405 13.1217 8.0488 13.0888L7.43956 12.8796C7.35117 12.8492 7.25249 12.8728 7.18899 12.9412L6.89724 13.2499C6.81058 13.3419 6.6647 13.3495 6.56859 13.2668L5.73195 12.5471C5.63241 12.4619 5.62383 12.3126 5.71222 12.2164L6.07519 11.8224C6.13182 11.7608 6.1507 11.6739 6.12496 11.5946L5.90186 10.9222C5.87011 10.8268 5.77915 10.7619 5.67704 10.7619H5.23598C5.10555 10.7619 5 10.6581 5 10.5298V9.55284C5 9.42459 5.10555 9.32082 5.23598 9.32082H5.65644C5.74826 9.32082 5.83235 9.26851 5.87096 9.18583L6.14555 8.60367C6.18588 8.51846 6.16958 8.4189 6.10608 8.34972L5.70106 7.91268C5.61783 7.82324 5.61868 7.68488 5.70364 7.59713L6.46391 6.80574C6.55744 6.70871 6.71533 6.70871 6.808 6.80658L7.12292 7.139C7.18814 7.20818 7.28939 7.23096 7.37863 7.19806L8.03422 6.95423C8.12603 6.92048 8.18696 6.83358 8.18696 6.7374V6.23202C8.18696 6.10378 8.2925 6 8.42293 6H9.57707C9.7075 6 9.81304 6.10378 9.81304 6.23202Z' stroke='none' strokeLinecap='round' strokeLinejoin='round' /> |
| 36 | + </svg> |
| 37 | + ) |
| 38 | + break |
| 39 | + case MEDIUM: |
| 40 | + icon = ( |
| 41 | + <svg |
| 42 | + width={24} |
| 43 | + height={24} |
| 44 | + viewBox='0 0 24 24' |
| 45 | + fill='none' |
| 46 | + xmlns='http://www.w3.org/2000/svg' |
| 47 | + className={className} |
| 48 | + > |
| 49 | + <path d='M6 18.75L4.20557 16.5V7.5L11.9998 3L19.794 7.5V9.75' stroke='none' strokeWidth='1.5' strokeLinecap='round' strokeLinejoin='round' /> |
| 50 | + <path d='M13.5008 17.3286C14.7555 17.3286 15.7726 16.3286 15.7726 15.0949C15.7726 13.8613 14.7555 12.8612 13.5008 12.8612C12.2461 12.8612 11.229 13.8613 11.229 15.0949C11.229 16.3286 12.2461 17.3286 13.5008 17.3286Z' stroke='none' strokeWidth='1.5' strokeLinecap='round' strokeLinejoin='round' /> |
| 51 | + <path d='M14.7196 9.34803V10.1061C14.7196 10.2504 14.811 10.3807 14.9487 10.4313L15.9321 10.7971C16.0659 10.8464 16.2178 10.8123 16.3156 10.7085L16.788 10.2099C16.927 10.0631 17.1638 10.0618 17.3041 10.2086L18.4445 11.3957C18.572 11.5286 18.5733 11.7349 18.4484 11.869L17.8409 12.5246C17.7443 12.6283 17.7212 12.7789 17.7817 12.9055L18.1936 13.7787C18.2515 13.9015 18.3776 13.9812 18.5153 13.9812H19.146C19.3417 13.9812 19.5 14.1369 19.5 14.3293V15.7948C19.5 15.9871 19.3417 16.1428 19.146 16.1428H18.4832C18.33 16.1428 18.1936 16.2402 18.1459 16.3833L17.8113 17.3919C17.7714 17.5109 17.7997 17.6412 17.8859 17.7336L18.4304 18.3246C18.563 18.4689 18.5501 18.6929 18.4008 18.8207L17.1458 19.9002C17.0017 20.0243 16.7828 20.0129 16.6528 19.8749L16.2152 19.4117C16.12 19.3105 15.972 19.2738 15.8394 19.3193L14.9255 19.6332C14.7826 19.6826 14.6874 19.8142 14.6874 19.9622V20.652C14.6874 20.8443 14.5291 21 14.3334 21H12.6653C12.4696 21 12.3113 20.8443 12.3113 20.652V19.9622C12.3113 19.8142 12.2161 19.6826 12.0732 19.6332L11.1593 19.3193C11.0268 19.2738 10.8787 19.3092 10.7835 19.4117L10.3459 19.8749C10.2159 20.0129 9.99705 20.0243 9.85289 19.9002L8.59793 18.8207C8.44862 18.6929 8.43575 18.4689 8.56833 18.3246L9.11279 17.7336C9.19774 17.6412 9.22605 17.5109 9.18744 17.3919L8.85278 16.3833C8.80516 16.2402 8.66872 16.1428 8.51555 16.1428H7.85396C7.65832 16.1428 7.5 15.9871 7.5 15.7948V14.3293C7.5 14.1369 7.65832 13.9812 7.85396 13.9812H8.48466C8.62239 13.9812 8.74853 13.9028 8.80645 13.7787L9.21833 12.9055C9.27883 12.7777 9.25437 12.6283 9.15912 12.5246L8.55159 11.869C8.42674 11.7349 8.42803 11.5273 8.55545 11.3957L9.69586 10.2086C9.83616 10.0631 10.073 10.0631 10.212 10.2099L10.6844 10.7085C10.7822 10.8123 10.9341 10.8464 11.068 10.7971L12.0513 10.4313C12.189 10.3807 12.2804 10.2504 12.2804 10.1061V9.34803C12.2804 9.15566 12.4388 9 12.6344 9H14.3656C14.5612 9 14.7196 9.15566 14.7196 9.34803Z' stroke='none' strokeWidth='1.5' strokeLinecap='round' strokeLinejoin='round' /> |
| 52 | + </svg> |
| 53 | + ) |
| 54 | + break |
| 55 | + case LARGE: |
| 56 | + icon = ( |
| 57 | + <svg |
| 58 | + width={40} |
| 59 | + height={40} |
| 60 | + viewBox='0 0 40 40' |
| 61 | + fill='none' |
| 62 | + xmlns='http://www.w3.org/2000/svg' |
| 63 | + className={className} |
| 64 | + > |
| 65 | + <path d='M10 31.25L7.00928 27.5V12.5L19.9997 5L32.99 12.5V16.25' stroke='none' strokeWidth='2' strokeLinecap='round' strokeLinejoin='round' /> |
| 66 | + <path d='M22.5017 28.881C24.5928 28.881 26.288 27.2142 26.288 25.1581C26.288 23.1021 24.5928 21.4353 22.5017 21.4353C20.4105 21.4353 18.7153 23.1021 18.7153 25.1581C18.7153 27.2142 20.4105 28.881 22.5017 28.881Z' stroke='none' strokeWidth='2' strokeLinecap='round' strokeLinejoin='round' /> |
| 67 | + <path d='M24.5326 15.58V16.8435C24.5326 17.0839 24.6849 17.3012 24.9145 17.3856L26.5534 17.9951C26.7765 18.0774 27.0297 18.0205 27.1927 17.8475L27.98 17.0165C28.2117 16.7718 28.6064 16.7697 28.8402 17.0143L30.7409 18.9928C30.9533 19.2143 30.9554 19.5581 30.7473 19.7817L29.7348 20.8743C29.5739 21.0472 29.5353 21.2982 29.6361 21.5092L30.3226 22.9646C30.4191 23.1692 30.6294 23.302 30.8589 23.302H31.9101C32.2361 23.302 32.5 23.5615 32.5 23.8821V26.3246C32.5 26.6452 32.2361 26.9047 31.9101 26.9047H30.8053C30.55 26.9047 30.3226 27.0671 30.2432 27.3054L29.6855 28.9865C29.619 29.1848 29.6661 29.402 29.8099 29.556L30.7173 30.541C30.9383 30.7815 30.9168 31.1548 30.668 31.3679L28.5764 33.1671C28.3361 33.3738 27.9714 33.3548 27.7547 33.1249L27.0254 32.3529C26.8666 32.1841 26.6199 32.123 26.399 32.1989L24.8758 32.722C24.6377 32.8043 24.479 33.0236 24.479 33.2704V34.42C24.479 34.7406 24.2151 35 23.889 35H21.1088C20.7827 35 20.5189 34.7406 20.5189 34.42V33.2704C20.5189 33.0236 20.3601 32.8043 20.122 32.722L18.5989 32.1989C18.3779 32.123 18.1312 32.182 17.9725 32.3529L17.2431 33.1249C17.0264 33.3548 16.6618 33.3738 16.4215 33.1671L14.3299 31.3679C14.081 31.1548 14.0596 30.7815 14.2805 30.541L15.188 29.556C15.3296 29.402 15.3768 29.1848 15.3124 28.9865L14.7546 27.3054C14.6753 27.0671 14.4479 26.9047 14.1926 26.9047H13.0899C12.7639 26.9047 12.5 26.6452 12.5 26.3246V23.8821C12.5 23.5615 12.7639 23.302 13.0899 23.302H14.1411C14.3706 23.302 14.5809 23.1713 14.6774 22.9646L15.3639 21.5092C15.4647 21.2961 15.424 21.0472 15.2652 20.8743L14.2527 19.7817C14.0446 19.5581 14.0467 19.2122 14.2591 18.9928L16.1598 17.0143C16.3936 16.7718 16.7883 16.7718 17.02 17.0165L17.8073 17.8475C17.9703 18.0205 18.2235 18.0774 18.4466 17.9951L20.0855 17.3856C20.3151 17.3012 20.4674 17.0839 20.4674 16.8435V15.58C20.4674 15.2594 20.7313 15 21.0573 15H23.9427C24.2687 15 24.5326 15.2594 24.5326 15.58Z' stroke='none' strokeWidth='2' strokeLinecap='round' strokeLinejoin='round' /> |
| 68 | + </svg> |
| 69 | + ) |
| 70 | + break |
| 71 | + default: |
| 72 | + break |
| 73 | + } |
| 74 | + return icon |
| 75 | +} |
| 76 | + |
| 77 | +PodSettingsIcon.propTypes = { |
| 78 | + /** |
| 79 | + * color of text, icon and borders |
| 80 | + */ |
| 81 | + color: PropTypes.oneOf(COLORS_ICON), |
| 82 | + /** |
| 83 | + * Size |
| 84 | + */ |
| 85 | + size: PropTypes.oneOf(SIZES), |
| 86 | + /** |
| 87 | + * disabled |
| 88 | + */ |
| 89 | + disabled: PropTypes.bool, |
| 90 | + /** |
| 91 | + * inactive |
| 92 | + */ |
| 93 | + inactive: PropTypes.bool |
| 94 | +} |
| 95 | + |
| 96 | +export default PodSettingsIcon |
0 commit comments