import React from 'react';
import { Grid, Image, Header } from 'semantic-ui-react';
import './footer.css';

export const Footer = (props) => {
    return (
        <footer>

            <p>
                <small>
                    Made by two dudes with Greek-sounding names across the globe from one another.
                </small>
            </p>

            <hr />

            <Grid columns={3} divided>
                <Grid.Row>
                    <Grid.Column>
                        <Header size="small" className="inline">
                            <a href="https://czonios.github.io" target="_blank" rel="noopener noreferrer">
                                Christos <br className="text-wrap" /> Zonios
                            </a>
                        </Header>
                        <a href="https://github.com/czonios" target="_blank" rel="noopener noreferrer">
                            <Image className="inline" src={require('./img/icons/github.png')} size="mini" />
                        </a>
                    </Grid.Column>

                    <Grid.Column>
                        <Header size="small" className="inline">Official Github repository</Header>
                        <a href="https://github.com/czonios/schedule-maker-app" target="_blank" rel="noopener noreferrer">
                            <Image className="inline" src={require('./img/icons/github.png')} size="mini" />
                        </a>
                    </Grid.Column>

                    <Grid.Column>
                        <Header size="small" className="inline">
                            <a href="https://github.com/paspheeris/portfolio" target="_blank" rel="noopener noreferrer">
                                Paul <br className="text-wrap" /> Spheeris
                            </a>
                        </Header>
                        <a href="https://github.com/paspheeris" target="_blank" rel="noopener noreferrer">
                            <Image className="inline" src={require('./img/icons/github.png')} size="mini" />
                        </a>
                    </Grid.Column>
                </Grid.Row>
            </Grid>

        </footer>
    );
}
@@ -48,16 +48,25 @@
 , Header
+, Divider
  %7D from 
@@ -375,12 +375,44 @@
    %3C
-hr /
+Divider horizontal%3EAbout us%3C/Divider
 %3E%0A%0A 

REPLACE some HTML tags for semantic-ui-react counterparts