import { ThemeContext } from 'contexts/themeContext' ; import { useContext } from 'react' ; import { CSSProperties } from 'react' ; import { Languages } from 'constants/languages/language-options' ; export default function Footer ( ) { const { colors } = useContext ( ThemeContext ) . theme ; const footerLinksStyles = { display : 'inline-flex' , justifyContent : 'center' , } ; const link = ( text , link ? ) => ( < a style = { { color : colors . text . action . primary , marginLeft : 10 , marginRight : 10 , } } href = { link } > { text } < /a>); const languageLink = ( lang ) => ( < div onClick = { ( ) => setLanguage ( lang ) } > { link ( Languages [ lang ] . long ) } < /div>); const setLanguage = ( newLanguage ) => { localStorage . setItem ( 'lang' , newLanguage ) ; window . location . reload ( ) ; window . scrollTo ( 0 , 0 ) ; } ; return ( < div style = { { display : 'grid' , rowGap : 20 , padding : 30 , background : 'black' , textAlign : 'center' , } } > < div style = { footerLinksStyles } > { Object . keys ( Languages ) . map ( languageLink ) } < /div> < div style = { footerLinksStyles } > { link ( 'Discord' , 'https://discord.gg/6jXrJSyDFf' ) } { link ( 'GitHub' , 'https://github.com/jbx-protocol/juice-interface' ) } { link ( 'Twitter' , 'https://twitter.com/juiceboxETH' ) } < /div> < /div>); }