Skip to content

Instantly share code, notes, and snippets.

@jeremeylduvall
Created Dec 13, 2017
Embed
What would you like to do?
Header with dummy data
import React from 'react';
import PropTypes from 'prop-types';
import Link from 'gatsby-link';
const Header = () => {
const bio = 'Lorem Ipsum is simply dummy text that I want to appear on the screen.';
const username = 'username';
const src = 'https://www.gravatar.com/avatar/00000000000000000000000000000000?d=retro';
return (
<div
style={ {
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
flexWrap: 'wrap',
margin: '2em 2em',
} }
>
<span
style={ {
flexBasis: '120px',
height: '96px',
} }
>
<img
src={ src }
alt={ `Jeremey DuVall` }
style={ {
marginBottom: 0,
borderRadius: "50%",
width: '96px',
} }
/>
</span>
<span
style={ {
flexBasis: '500px',
flexGrow: 1,
} }
>
<Link
to='/'
activeStyle={ {
textDecoration: 'none',
color: '#000000'
} }
>
<h3
dangerouslySetInnerHTML={ { __html: ( username ) } }
style={ { marginBottom: '0.2em' } }
/>
</Link>
<p
style={ { marginBottom: 0 } }
dangerouslySetInnerHTML={ { __html: ( bio ) } }
/>
</span>
</div>
)
}
Header.PropTypes = {
src: PropTypes.string,
username: PropTypes.string,
bio: PropTypes.string,
}
export default Header;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment