87 lines
1.8 KiB
JavaScript
Executable File
87 lines
1.8 KiB
JavaScript
Executable File
import React, { memo } from 'react';
|
|
import FontAwesome from 'react-fontawesome';
|
|
import { sourceIcon } from '../util/helpers';
|
|
|
|
const Icon = memo(({
|
|
name,
|
|
type,
|
|
className,
|
|
onClick,
|
|
}) => {
|
|
if (!name || name === '') return null;
|
|
|
|
const fullClassName = `icon icon--${type || 'material'} ${className || ''}`;
|
|
|
|
switch (type) {
|
|
case 'svg':
|
|
return (
|
|
<span className={fullClassName}>
|
|
<img
|
|
src={`/iris/assets/icons/${name}.svg`}
|
|
onClick={onClick}
|
|
alt={`${name} icon`}
|
|
/>
|
|
</span>
|
|
);
|
|
|
|
case 'gif':
|
|
return (
|
|
<span className={fullClassName}>
|
|
<img
|
|
className={fullClassName}
|
|
src={`/iris/assets/icons/${name}.gif`}
|
|
onClick={onClick}
|
|
alt={`${name} icon`}
|
|
/>
|
|
</span>
|
|
);
|
|
|
|
case 'fontawesome':
|
|
return (
|
|
<FontAwesome
|
|
className={fullClassName}
|
|
type="fontawesome"
|
|
name={name}
|
|
onClick={onClick}
|
|
/>
|
|
);
|
|
|
|
case 'css':
|
|
if (name === 'playing') {
|
|
return (
|
|
<i className={`${fullClassName} icon--playing`}>
|
|
<span />
|
|
<span />
|
|
<span />
|
|
</i>
|
|
);
|
|
}
|
|
break;
|
|
|
|
default:
|
|
return <i className={fullClassName} onClick={onClick}>{name}</i>;
|
|
}
|
|
});
|
|
|
|
const SourceIcon = ({
|
|
uri,
|
|
...rest
|
|
}) => {
|
|
const source = sourceIcon(uri);
|
|
|
|
switch (source) {
|
|
case 'genius':
|
|
case 'tidal':
|
|
return <Icon name={source} type="svg" className="source" {...rest} />;
|
|
default:
|
|
return <Icon name={source} type="fontawesome" className="source" {...rest} />;
|
|
}
|
|
};
|
|
|
|
export default Icon;
|
|
|
|
export {
|
|
Icon,
|
|
SourceIcon,
|
|
};
|