2020-03-08 22:45:07 +07:00
|
|
|
import React from 'react';
|
2019-11-23 19:41:14 +07:00
|
|
|
import styled from '@emotion/styled';
|
2020-03-08 22:45:07 +07:00
|
|
|
import { useTranslation } from 'react-i18next';
|
2019-10-03 23:17:04 +07:00
|
|
|
|
2019-10-31 14:12:18 +07:00
|
|
|
import { default as MuiTabs } from '../../muiComponents/Tabs';
|
|
|
|
import Tab from '../../muiComponents/Tab';
|
|
|
|
|
2019-10-03 23:17:04 +07:00
|
|
|
interface Props {
|
2020-03-08 22:45:07 +07:00
|
|
|
onChange: (event, newValue) => void;
|
|
|
|
tabPosition: number;
|
2019-10-03 23:17:04 +07:00
|
|
|
}
|
|
|
|
|
2020-03-08 22:45:07 +07:00
|
|
|
const DetailContainerTabs: React.FC<Props> = ({ tabPosition, onChange }) => {
|
|
|
|
const { t } = useTranslation();
|
2019-10-03 23:17:04 +07:00
|
|
|
|
|
|
|
return (
|
2019-10-27 21:49:30 +07:00
|
|
|
<Tabs
|
|
|
|
indicatorColor={'primary'}
|
2020-03-08 22:45:07 +07:00
|
|
|
onChange={onChange}
|
2019-10-27 21:49:30 +07:00
|
|
|
textColor={'primary'}
|
2020-03-08 22:45:07 +07:00
|
|
|
value={tabPosition}
|
2019-10-27 21:49:30 +07:00
|
|
|
variant={'fullWidth'}>
|
2020-03-08 22:45:07 +07:00
|
|
|
<Tab data-testid={'readme-tab'} id={'readme-tab'} label={t('tab.readme')} />
|
|
|
|
<Tab data-testid={'dependencies-tab'} id={'dependencies-tab'} label={t('tab.dependencies')} />
|
|
|
|
<Tab data-testid={'versions-tab'} id={'versions-tab'} label={t('tab.versions')} />
|
|
|
|
<Tab data-testid={'uplinks-tab'} id={'uplinks-tab'} label={t('tab.uplinks')} />
|
2019-10-03 23:17:04 +07:00
|
|
|
</Tabs>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
export default DetailContainerTabs;
|
2020-03-08 22:45:07 +07:00
|
|
|
|
|
|
|
const Tabs = styled(MuiTabs)({
|
|
|
|
marginBottom: 16,
|
|
|
|
});
|