mirror of
https://github.com/Stremio/stremio-web.git
synced 2026-04-20 19:02:15 +00:00
NavTabButton shows Image or Icon depending on details property
This commit is contained in:
parent
b636bd9d1e
commit
2afedcd67f
2 changed files with 19 additions and 5 deletions
|
|
@ -3,16 +3,30 @@ const PropTypes = require('prop-types');
|
||||||
const classnames = require('classnames');
|
const classnames = require('classnames');
|
||||||
const Icon = require('stremio-icons/dom');
|
const Icon = require('stremio-icons/dom');
|
||||||
const Button = require('stremio/common/Button');
|
const Button = require('stremio/common/Button');
|
||||||
|
const Image = require('stremio/common/Image');
|
||||||
const styles = require('./styles');
|
const styles = require('./styles');
|
||||||
|
|
||||||
const NavTabButton = ({ className, icon, label, href, selected, onClick }) => {
|
const NavTabButton = ({ className, icon, label, href, selected, details, onClick }) => {
|
||||||
|
const renderLogoFallback = React.useMemo(() => () => {
|
||||||
|
return (
|
||||||
|
<Icon className={styles['icon']} icon={'ic_addons'} />
|
||||||
|
);
|
||||||
|
}, []);
|
||||||
return (
|
return (
|
||||||
<Button className={classnames(className, styles['nav-tab-button-container'], { 'selected': selected })} title={label} tabIndex={-1} href={href} onClick={onClick}>
|
<Button className={classnames(className, styles['nav-tab-button-container'], { 'selected': selected })} title={label} tabIndex={-1} href={href} onClick={onClick}>
|
||||||
{
|
{
|
||||||
typeof icon === 'string' && icon.length > 0 ?
|
details ?
|
||||||
<Icon className={styles['icon']} icon={icon} />
|
<Image
|
||||||
|
className={styles['logo']}
|
||||||
|
src={icon}
|
||||||
|
alt={' '}
|
||||||
|
renderFallback={renderLogoFallback}
|
||||||
|
/>
|
||||||
:
|
:
|
||||||
null
|
typeof icon === 'string' && icon.length > 0 ?
|
||||||
|
<Icon className={styles['icon']} icon={icon} />
|
||||||
|
:
|
||||||
|
null
|
||||||
}
|
}
|
||||||
{
|
{
|
||||||
typeof label === 'string' && label.length > 0 ?
|
typeof label === 'string' && label.length > 0 ?
|
||||||
|
|
|
||||||
|
|
@ -27,7 +27,7 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon {
|
.icon, .logo {
|
||||||
flex: none;
|
flex: none;
|
||||||
width: 1.7rem;
|
width: 1.7rem;
|
||||||
height: 1.7rem;
|
height: 1.7rem;
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue