gab-social/app/javascript/gabsocial/features/ui/components/promo_panel.js

61 lines
2.1 KiB
JavaScript
Raw Normal View History

2019-07-02 08:10:25 +01:00
import React from 'react';
import PropTypes from 'prop-types';
import { FormattedMessage } from 'react-intl';
2019-07-02 08:10:25 +01:00
import Icon from 'gabsocial/components/icon';
import { connect } from 'react-redux';
import { me } from '../../../initial_state';
const mapStateToProps = state => {
return {
isPro: state.getIn(['accounts', me, 'is_pro']),
};
};
export default
@connect(mapStateToProps)
class PromoPanel extends React.PureComponent {
static propTypes = {
isPro: PropTypes.bool,
};
2019-07-02 08:10:25 +01:00
render() {
const { isPro } = this.props;
return (
<div className='wtf-panel promo-panel'>
<div className='promo-panel__container'>
{
!isPro &&
<div className='promo-panel-item promo-panel-item--highlighted'>
<a className='promo-panel-item__btn' href='https://pro.gab.com'>
<Icon id='arrow-up' className='promo-panel-item__icon' fixedWidth />
<FormattedMessage id='promo.gab_pro' defaultMessage='Upgrade to GabPRO' />
</a>
</div>
}
<div className={`promo-panel-item ${!isPro ? 'promo-panel-item--top-rounded' : ''}`}>
<a className='promo-panel-item__btn' href='https://shop.dissenter.com'>
<Icon id='shopping-cart' className='promo-panel-item__icon' fixedWidth />
<FormattedMessage id='promo.store' defaultMessage='Store - Buy Merch' />
</a>
</div>
2019-07-02 08:10:25 +01:00
<div className='promo-panel-item'>
<a className='promo-panel-item__btn' href='https://trends.gab.com'>
<Icon id='signal' className='promo-panel-item__icon' fixedWidth />
<FormattedMessage id='promo.trends' defaultMessage='Trends' />
</a>
</div>
<div className='promo-panel-item'>
<a className='promo-panel-item__btn' href='https://apps.gab.com'>
<Icon id='th' className='promo-panel-item__icon' fixedWidth />
<FormattedMessage id='promo.gab_apps' defaultMessage='Gab Apps' />
</a>
</div>
</div>
</div>
)
}
}