p5.js-web-editor/client/modules/User/components/DashboardTabSwitcher.jsx

54 lines
1.7 KiB
React
Raw Normal View History

2019-08-11 09:08:17 +00:00
import PropTypes from 'prop-types';
import React from 'react';
import { withTranslation } from 'react-i18next';
2019-08-11 09:08:17 +00:00
import { Link } from 'react-router';
const TabKey = {
assets: 'assets',
collections: 'collections',
2019-08-11 09:08:17 +00:00
sketches: 'sketches',
};
const Tab = ({ children, isSelected, to }) => {
const selectedClassName = 'dashboard-header__tab--selected';
const location = { pathname: to, state: { skipSavingPath: true } };
const content = isSelected ? <span>{children}</span> : <Link to={location}>{children}</Link>;
2019-08-11 09:08:17 +00:00
return (
<li className={`dashboard-header__tab ${isSelected && selectedClassName}`}>
<h4 className="dashboard-header__tab__title">
{content}
</h4>
</li>
);
};
Tab.propTypes = {
2020-01-29 17:31:33 +00:00
children: PropTypes.string.isRequired,
2019-08-11 09:08:17 +00:00
isSelected: PropTypes.bool.isRequired,
to: PropTypes.string.isRequired,
};
const DashboardTabSwitcher = ({
currentTab, isOwner, username, t
}) => (
2019-09-08 14:43:16 +00:00
<ul className="dashboard-header__switcher">
<div className="dashboard-header__tabs">
<Tab to={`/${username}/sketches`} isSelected={currentTab === TabKey.sketches}>{t('DashboardTabSwitcher.Sketches')}</Tab>
<Tab to={`/${username}/collections`} isSelected={currentTab === TabKey.collections}>{t('DashboardTabSwitcher.Collections')}</Tab>
{isOwner && <Tab to={`/${username}/assets`} isSelected={currentTab === TabKey.assets}>{t('DashboardTabSwitcher.Assets')}</Tab>}
2019-09-08 14:43:16 +00:00
</div>
</ul>
);
2019-08-11 09:08:17 +00:00
DashboardTabSwitcher.propTypes = {
currentTab: PropTypes.string.isRequired,
isOwner: PropTypes.bool.isRequired,
username: PropTypes.string.isRequired,
t: PropTypes.func.isRequired
2019-08-11 09:08:17 +00:00
};
const DashboardTabSwitcherPublic = withTranslation()(DashboardTabSwitcher);
export { DashboardTabSwitcherPublic as default, TabKey };