gab-social/app/javascript/gabsocial/components/pills.js

42 lines
1.0 KiB
JavaScript
Raw Normal View History

import React from 'react'
import PropTypes from 'prop-types'
2020-05-07 00:40:54 +01:00
import ResponsiveClassesComponent from '../features/ui/util/responsive_classes_component'
2020-04-29 23:32:49 +01:00
import PillItem from './pill_item'
/**
* Renders pills components
* @param {array} [props.pills] - tab bar data for creating `TabBarItem`
*/
class Pills extends React.PureComponent {
2020-04-29 23:32:49 +01:00
render() {
const { pills } = this.props
return (
2020-05-07 00:40:54 +01:00
<ResponsiveClassesComponent
classNames={[_s.d, _s.flexWrap, _s.px5, _s.flexRow].join(' ')}
classNamesXS={[_s.d, _s.overflowYHidden, _s.overflowXScroll, _s.noScrollbar, _s.pl10, _s.pr15, _s.flexRow].join(' ')}
2020-05-07 00:40:54 +01:00
>
2020-04-29 23:32:49 +01:00
{
!!pills &&
pills.map((tab, i) => (
<PillItem
key={`pill-item-${i}`}
title={tab.title}
onClick={tab.onClick}
to={tab.to}
isActive={tab.active}
/>
))
}
2020-05-07 00:40:54 +01:00
</ResponsiveClassesComponent>
2020-04-29 23:32:49 +01:00
)
}
}
Pills.propTypes = {
pills: PropTypes.array,
}
export default Pills