argo-cd

1
import * as React from 'react';
2
import {resourceIcons} from './resources';
3

4
export const ResourceIcon = ({kind, customStyle}: {kind: string; customStyle?: React.CSSProperties}) => {
5
    if (kind === 'node') {
6
        return <img src={'assets/images/infrastructure_components/' + kind + '.svg'} alt={kind} style={{padding: '2px', width: '40px', height: '32px', ...customStyle}} />;
7
    }
8
    const i = resourceIcons.get(kind);
9
    if (i !== undefined) {
10
        return <img src={'assets/images/resources/' + i + '.svg'} alt={kind} style={{padding: '2px', width: '40px', height: '32px', ...customStyle}} />;
11
    }
12
    if (kind === 'Application') {
13
        return <i title={kind} className={`icon argo-icon-application`} style={customStyle} />;
14
    }
15
    const initials = kind.replace(/[a-z]/g, '');
16
    const n = initials.length;
17
    const style: React.CSSProperties = {
18
        display: 'inline-block',
19
        verticalAlign: 'middle',
20
        padding: `${n <= 2 ? 2 : 0}px 4px`,
21
        width: '32px',
22
        height: '32px',
23
        borderRadius: '50%',
24
        backgroundColor: '#8FA4B1',
25
        textAlign: 'center',
26
        lineHeight: '30px',
27
        ...customStyle
28
    };
29
    return (
30
        <div style={style}>
31
            <span style={{color: 'white', fontSize: `${n <= 2 ? 1 : 0.6}em`}}>{initials}</span>
32
        </div>
33
    );
34
};
35