old-ybbond

My old site that was written with ReactJS
Log | Files | Refs | README | LICENSE | CC-LICENSE

HeaderFooter.js (2018B)

      1 // @flow
      2 import React from 'react';
      3 import styled from 'styled-components';
      4 import theme from 'styled-theming';
      5 
      6 import {Button, Link, Text} from './';
      7 import {colors} from '../Theme/colors';
      8 
      9 const borderColor = theme('mode', {
     10   light: colors.dark,
     11   dark: colors.light,
     12 });
     13 
     14 const Header = styled.header`
     15   margin-bottom: 30px;
     16 `;
     17 
     18 const Footer = styled.footer`
     19   margin-top: 70px;
     20   padding: 20px 0;
     21   border-top: 2px dashed ${borderColor};
     22 `;
     23 
     24 type HeaderFooterProps = {
     25   children: React$Node,
     26   dark: boolean,
     27   toggleDark: () => void,
     28 };
     29 
     30 const HeaderFooter = ({children, dark, toggleDark}: HeaderFooterProps) => (
     31   <>
     32     <Header>
     33       <Text as="h1">
     34         Yohanes Bandung Bondowoso{' '}
     35         <Button
     36           aria-label="Toggle dark mode, is current mode dark?"
     37           aria-pressed={dark}
     38           onClick={toggleDark}
     39           tabindex="0"
     40         >
     41           {dark ? '🌛' : '🌞'}
     42         </Button>
     43       </Text>
     44       <Text>
     45         <Link aria-label="Go to CV Page" to="/">
     46           CV
     47         </Link>{' '}
     48         ::{' '}
     49         <Link aria-label="Go to page that lists the tools I use" to="/uses">
     50           Uses
     51         </Link>{' '}
     52         ::{' '}
     53         <Link aria-label="Go to About Page" to="/about">
     54           About
     55         </Link>{' '}
     56         ::{' '}
     57         <Link
     58           aria-label="Go to my Blog!"
     59           to="https://ybbond.dev"
     60           data-hint="Blog"
     61           rel="me"
     62         >
     63           Blog 🌐
     64         </Link>{' '}
     65       </Text>
     66     </Header>
     67     {children}
     68     <Footer>
     69       <Text>See you sooner :)</Text>
     70       <Text>
     71         Contact:{' '}
     72         <Link
     73           to="mailto:bandungpenting@gmail.com?Subject=From%20ybbond.dev"
     74           data-hint="Email"
     75           rel="me"
     76         >
     77           bandungpenting@gmail.com
     78         </Link>
     79       </Text>
     80       <Text>
     81         Other site:{' '}
     82         <Link to="https://reason.ybbond.dev">reason.ybbond.dev</Link>
     83       </Text>
     84     </Footer>
     85   </>
     86 );
     87 
     88 export default React.memo<HeaderFooterProps>(HeaderFooter);