Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-03-11 21:27:05 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

NavTab component introduced

Browse source
This commit is contained in:
NikolaBorislavovHristov 2018-06-15 13:45:33 +03:00
parent f6acc59b8a
commit eb1b49e303
2 changed files with 35 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
src/app/NavBar/NavBar.js
View file

@ -1,7 +1,6 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { NavLink } from 'react-router-dom';
import Icon from 'stremio-icons/dom';
import NavTab from './NavTab';
import styles from './styles';
class NavBar extends Component {
@ -12,34 +11,10 @@ class NavBar extends Component {
render() {
return (
<nav className={styles['nav-bar']}>
<NavLink className={styles['nav-tab']} activeClassName={styles['active']} to={'/'} exact={true} replace={false}>
<Icon
className={styles['nav-tab-icon']}
icon={'ic_board'}
/>
<span className={styles['nav-tab-label']}>Board</span>
</NavLink>
<NavLink className={styles['nav-tab']} activeClassName={styles['active']} to={'/discover'} replace={false}>
<Icon
className={styles['nav-tab-icon']}
icon={'ic_discover'}
/>
<span className={styles['nav-tab-label']}>Discover</span>
</NavLink>
<NavLink className={styles['nav-tab']} activeClassName={styles['active']} to={'/library'} replace={false}>
<Icon
className={styles['nav-tab-icon']}
icon={'ic_library'}
/>
<span className={styles['nav-tab-label']}>My Library</span>
</NavLink>
<NavLink className={styles['nav-tab']} activeClassName={styles['active']} to={'/calendar'} replace={false}>
<Icon
className={styles['nav-tab-icon']}
icon={'ic_calendar'}
/>
<span className={styles['nav-tab-label']}>Calendar</span>
</NavLink>
<NavTab to={'/'} exact={true} icon={'ic_board'} label={'Board'} />
<NavTab to={'/discover'} icon={'ic_discover'} label={'Discover'} />
<NavTab to={'/library'} icon={'ic_library'} label={'My Library'} />
<NavTab to={'/calendar'} icon={'ic_calendar'} label={'Calendar'} />
</nav>
);
}

30
src/app/NavBar/NavTab.js Normal file
View file

@ -0,0 +1,30 @@
import React from 'react';
import PropTypes from 'prop-types';
import { NavLink } from 'react-router-dom';
import Icon from 'stremio-icons/dom';
import styles from './styles';
const NavTab = ({ to, exact, replace, icon, label }) => (
<NavLink className={styles['nav-tab']} activeClassName={styles['active']} to={to} exact={exact} replace={replace}>
<Icon
className={styles['nav-tab-icon']}
icon={icon}
/>
<span className={styles['nav-tab-label']}>{label}</span>
</NavLink>
);
NavTab.propTypes = {
icon: PropTypes.string.isRequired,
label: PropTypes.string.isRequired,
to: PropTypes.string.isRequired,
exact: PropTypes.bool.isRequired,
replace: PropTypes.bool.isRequired
};
NavTab.defaultProps = {
exact: false,
replace: false
};
export default NavTab;