76 lines
1.9 KiB
TypeScript
76 lines
1.9 KiB
TypeScript
import React from 'react';
|
|
import Typography from '@material-ui/core/Typography';
|
|
import Link from '@material-ui/core/Link';
|
|
|
|
export default function Footer() {
|
|
return (
|
|
<div
|
|
style={{
|
|
zIndex: 99,
|
|
position: 'fixed',
|
|
width: '100%',
|
|
bottom: 0,
|
|
textAlign: 'center',
|
|
height: '30px',
|
|
backgroundColor: '#fbfbfb',
|
|
borderTop: 'solid 1pt #ccc',
|
|
display: 'flex',
|
|
justifyContent: 'space-between',
|
|
paddingLeft: '10px',
|
|
paddingRight: '10px',
|
|
}}
|
|
>
|
|
<div style={{ marginLeft: 'auto', marginRight: 'auto', display: 'flex' }}>
|
|
<FooterButton
|
|
href={
|
|
'https://github.com/project-serum/anchor/blob/master/examples/lockup/docs/staking.md'
|
|
}
|
|
label={'Technical Documentation'}
|
|
/>
|
|
<FooterButton
|
|
href={'https://github.com/project-serum/awesome-serum'}
|
|
label={'Developer Resources'}
|
|
/>
|
|
<FooterButton
|
|
href={'https://discord.com/channels/739225212658122886'}
|
|
label={'Discord'}
|
|
/>
|
|
<FooterButton href={'https://t.me/ProjectSerum'} label={'Telegram'} />
|
|
<FooterButton
|
|
href={'https://github.com/project-serum'}
|
|
label={'GitHub'}
|
|
/>
|
|
<FooterButton
|
|
href={'https://solanabeach.io/'}
|
|
label={'Solana Network'}
|
|
isEnd={true}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
type FooterButtonProps = {
|
|
label: string;
|
|
href: string;
|
|
isEnd?: boolean;
|
|
};
|
|
|
|
function FooterButton(props: FooterButtonProps) {
|
|
const { label, href, isEnd } = props;
|
|
return (
|
|
<div
|
|
style={{
|
|
display: 'flex',
|
|
justifyContent: 'center',
|
|
flexDirection: 'column',
|
|
marginRight: isEnd ? '' : '15px',
|
|
}}
|
|
>
|
|
<Link href={href} target="_blank" color="inherit">
|
|
<Typography style={{ fontSize: '14px' }}>{label}</Typography>
|
|
</Link>
|
|
</div>
|
|
);
|
|
}
|