/** @jsx jsx */ import Link from 'next/link'; import { jsx, Flex, Grid, Text, NavLink, Container, Link as ThemeLink, useColorMode, } from 'theme-ui'; import { Icon } from '@makerdao/dai-ui-icons'; const links = [ [ 'Resources', [ ['Documentation', '/documentation'], ['Guides', '/guides'], ['Security', '/security'], ], ], [ 'Documentation', [ ['Introduction', '/documentation/introduction-to-the-maker-protocol'], ['Smart Contracts', '/documentation/introduction-to-core-module'], ['Auctions', '/documentation/the-auctions-of-the-maker-protocol'], ['Keepers', '/documentation/introduction-to-auction-keepers'], ['SDKs', '/documentation/introduction-to-dai-js'], ['CLIs', '/documentation/mcd-cli'], ['Glossary', '/documentation/mcd-glossaries'], ], ], [ 'Security', [ ['Introduction', '/security/multi-collateral-dai-security'], ['Audit Reports', '/security/mcd-security-audits'], ['Bug Bounty Program', '/security/bug-bounty-program'], ['Formal Verification', '/security/formal-verification'], ], ], [ 'Libraries', [ ['Dai.js', '/documentation/introduction-to-dai-js'], ['Pymaker', '/documentation/pymaker'], ], ], [ 'Community', [ ['Comm Dev Portal', 'https://community-development.makerdao.com/en/'], ['Blog', 'https://blog.makerdao.com/'], ['Forum', 'https://forum.makerdao.com/c/devs/19'], ['Events', 'https://makerdao.com/en/events'], ], ], ]; const ColorModeToggle = (props) => { const [mode, setMode] = useColorMode(); return ( <Flex sx={{ mt: 'auto', alignItems: 'center', cursor: 'pointer' }} onClick={(e) => { const next = mode === 'dark' ? 'light' : 'dark'; setMode(next); }} > <Icon name={'moon'} color="text" size="auto" sx={{ height: 20, width: 20 }} /> <Text variant="plainText" sx={{ fontSize: 3, pl: 2 }}> Color Mode </Text> </Flex> ); }; const IconLink = ({ name, url, height = 20, width = 20 }) => { return ( <ThemeLink href={url} target="_blank"> <Icon name={name} color="text" size="auto" sx={{ cursor: 'pointer', height, width }} /> </ThemeLink> ); }; const Section = ({ title, content }) => { return ( <Flex sx={{ flexDirection: 'column' }}> <Text variant="plainText" sx={{ fontSize: 3, fontWeight: 'semiBold' }}> {title} </Text> {content.map(([name, url]) => { return url.indexOf('http') === 0 ? ( <NavLink key={name} href={url} target="_blank" sx={{ px: 0, py: 1, fontSize: 3, color: 'onBackgroundMuted' }} variant="sidebar" > {name} </NavLink> ) : ( <Link key={name} href={url} passHref> <NavLink sx={{ px: 0, py: 1, fontSize: 3, color: 'onBackgroundMuted' }} variant="sidebar" > {name} </NavLink> </Link> ); })} </Flex> ); }; const Footer = () => { return ( <Container as="footer" sx={{ pt: 6 }}> <Grid sx={{ pb: 4 }} columns={[2, 3, 6]} gap={4}> <Flex sx={{ flexDirection: 'column', height: ['100%', '50%', '50%'] }}> <Flex sx={{ pb: 2 }}> <IconLink name="maker_full" url="https://www.makerdao.com" width={127} /> </Flex> <Flex> <Flex sx={{ pr: 4 }}> <IconLink name="github" url="https://github.com/makerdao/" /> </Flex> <Flex> <IconLink name="rocketchat" url="https://chat.makerdao.com/channel/dev" /> </Flex> </Flex> <ColorModeToggle /> </Flex> {links.map(([title, content]) => { return <Section key={title} title={title} content={content} />; })} </Grid> </Container> ); }; export default Footer;