Added GlobalFooter component
• Added: - GlobalFooter component that matches all other Gab product footers
This commit is contained in:
mgabdev
parent
952e052321
commit
ac229e0cc1
200
app/javascript/gabsocial/components/global_footer.js
Normal file
200
app/javascript/gabsocial/components/global_footer.js
Normal file
@ -0,0 +1,200 @@
|
||||
import Button from './button'
|
||||
import Heading from './heading'
|
||||
import Icon from './icon'
|
||||
import Text from './text'
|
||||
import ResponsiveClassesComponent from '../features/ui/util/responsive_classes_component'
|
||||
|
||||
export default class GlobalFooter extends PureComponent {
|
||||
|
||||
render() {
|
||||
|
||||
return (
|
||||
<div className={[_s.default, _s.z4, _s.width100PC].join(' ')}>
|
||||
<div className={[_s.default, _s.left0, _s.right0, _s.bottom0, _s.width100PC, _s.bgSubtle, _s.borderTop1PX, _s.alignItemsCenter, _s.borderColorSecondary].join(' ')}>
|
||||
|
||||
<div className={[_s.default, _s.mt15, _s.mb15].join(' ')}>
|
||||
<ResponsiveClassesComponent
|
||||
classNames={[_s.default, _s.width1255PX, _s.flexRow, _s.py15, _s.mt15, _s.mb15].join(' ')}
|
||||
classNamesSmall={[_s.default, _s.width1255PX, _s.alignItemsCenter, _s.pt15, _s.px15, _s.mt15].join(' ')}
|
||||
>
|
||||
|
||||
<ResponsiveClassesComponent
|
||||
classNames={[_s.default, _s.width330PX].join(' ')}
|
||||
classNamesSmall={[_s.default, _s.alignItemsCenter].join(' ')}
|
||||
>
|
||||
<div className={[_s.default, _s.mb10].join(' ')}>
|
||||
<Icon id='logo' />
|
||||
</div>
|
||||
<div className={[_s.default, _s.pr15, _s.maxWidth640PX].join(' ')}>
|
||||
<Text size='medium'>We build Freedom Of Speech Software. We champion free speech, individual liberty and the free flow of information online. All are welcome.</Text>
|
||||
</div>
|
||||
</ResponsiveClassesComponent>
|
||||
|
||||
<ResponsiveClassesComponent
|
||||
classNames={[_s.default, _s.flexRow, _s.flexGrow1, _s.pl15].join(' ')}
|
||||
classNamesSmall={[_s.default, _s.py15, _s.width100PC, _s.px15].join(' ')}
|
||||
>
|
||||
|
||||
<GlobalFooterColumn
|
||||
title='Join'
|
||||
items={[
|
||||
{
|
||||
href: 'https://gab.com',
|
||||
title: 'Gab Social',
|
||||
},
|
||||
{
|
||||
href: 'https://dissenter.com',
|
||||
title: 'Dissenter Browser',
|
||||
},
|
||||
{
|
||||
href: 'https://chat.gab.com',
|
||||
title: 'Gab Chat',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
|
||||
<GlobalFooterColumn
|
||||
title='Stay Informed'
|
||||
items={[
|
||||
{
|
||||
href: 'https://trends.gab.com',
|
||||
title: 'Gab Trends',
|
||||
},
|
||||
{
|
||||
href: 'https://news.gab.com',
|
||||
title: 'Gab News',
|
||||
},
|
||||
{
|
||||
href: 'https://apps.gab.com',
|
||||
title: 'Gab Apps',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
|
||||
<GlobalFooterColumn
|
||||
title='Support Us'
|
||||
items={[
|
||||
{
|
||||
href: 'https://pro.gab.com',
|
||||
title: 'Go PRO',
|
||||
},
|
||||
{
|
||||
href: 'https://shop.dissenter.com',
|
||||
title: 'Merch Store',
|
||||
},
|
||||
{
|
||||
href: 'https://news.gab.com/support-gab',
|
||||
title: 'Affiliates',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
|
||||
<GlobalFooterColumn
|
||||
title='Legal'
|
||||
items={[
|
||||
{
|
||||
to: '/about/terms',
|
||||
title: 'Terms of Service',
|
||||
},
|
||||
{
|
||||
to: '/about/privacy',
|
||||
title: 'Privacy Policy',
|
||||
},
|
||||
{
|
||||
to: '/about/dmca',
|
||||
title: 'Copyright Policy',
|
||||
},
|
||||
{
|
||||
href: 'https://help.gab.com',
|
||||
title: 'Contact Us',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
|
||||
</ResponsiveClassesComponent>
|
||||
</ResponsiveClassesComponent>
|
||||
</div>
|
||||
|
||||
<div className={[_s.default, _s.alignItemsCenter, _s.bgSecondary, _s.height100PC, _s.heightMin58PX, _s.width100PC, _s.saveAreaInsetPB, _s.justifyContentSpaceAround].join(' ')}>
|
||||
<ResponsiveClassesComponent
|
||||
classNames={[_s.default, _s.width1255PX, _s.flexRow, _s.alignItemsCenter].join(' ')}
|
||||
classNamesXS={[_s.default, _s.width1255PX, _s.alignItemsCenter, _s.px15, _s.pt15].join(' ')}
|
||||
>
|
||||
|
||||
<div classNames={[_s.default, _s.flexRow, _s.alignItemsCenter].join(' ')}>
|
||||
<Text weight='bold'>
|
||||
© 2020
|
||||
</Text>
|
||||
<Text>
|
||||
Copyright |
|
||||
</Text>
|
||||
<Button
|
||||
isText
|
||||
color='primary'
|
||||
backgroundColor='none'
|
||||
className={_s.displayInline}
|
||||
href='https://gab.com'
|
||||
>
|
||||
<Text>Gab AI Inc.</Text>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<ResponsiveClassesComponent
|
||||
classNames={[_s.default, _s.alignItemsCenter, _s.mlAuto].join(' ')}
|
||||
classNamesXS={[_s.default, _s.alignItemsCenter, _s.py15].join(' ')}
|
||||
>
|
||||
<Text>
|
||||
Made in USA 🇺🇸
|
||||
</Text>
|
||||
</ResponsiveClassesComponent>
|
||||
|
||||
</ResponsiveClassesComponent>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
class GlobalFooterColumn extends PureComponent {
|
||||
|
||||
static propTypes = {
|
||||
title: PropTypes.string,
|
||||
items: PropTypes.array,
|
||||
}
|
||||
|
||||
componentWillMount() {
|
||||
this.buttonOptions = {
|
||||
backgroundColor: 'none',
|
||||
color: 'primary',
|
||||
isText: true,
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
const { title, items } = this.props
|
||||
const { buttonOptions } = this
|
||||
|
||||
return (
|
||||
<ResponsiveClassesComponent
|
||||
classNames={[_s.default, _s.flexNormal].join(' ')}
|
||||
classNamesSmall={[_s.default, _s.width100PC, _s.alignItemsCenter, _s.mt15, _s.mb5, _s.pt15, _s.borderTop1PX, _s.borderColorSecondary].join(' ')}
|
||||
>
|
||||
<div className={_s.mb10}>
|
||||
<Heading size='h3'>{title}</Heading>
|
||||
</div>
|
||||
{
|
||||
items.map((item, i) => (
|
||||
<Button {...buttonOptions} to={item.to} href={item.href} key={`global-footer-column-${title}-${i}`}>
|
||||
<Text color='secondary' className={[_s.lineHeight15, _s.pt2].join(' ')}>{item.title}</Text>
|
||||
</Button>
|
||||
))
|
||||
}
|
||||
</ResponsiveClassesComponent>
|
||||
)
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user