RocketChat/Rocket.Chat

import { Box, Icon } from '@rocket.chat/fuselage';
import type { Keys as IconName } from '@rocket.chat/icons';
import type { ReactElement } from 'react';
import React from 'react';

const iconMap: Record<string, IconName> = {
    'browser': 'desktop',
    'mobile': 'mobile',
    'desktop-app': 'desktop',
    'mobile-app': 'mobile',
};

const DeviceIcon = ({ deviceType }: { deviceType: string }): ReactElement => (
    <Box
        is='span'
        display='inline-flex'
        alignItems='center'
        justifyContent='center'
        p={4}
        bg='selected'
        size='x24'
        borderRadius='full'
        mie={8}
    >
        <Icon name={iconMap[deviceType] || 'globe'} size='x16' color='hint' />
    </Box>
);

export default DeviceIcon;