sana137.in

Sana's gatsbyjs-based blog
git clone http://git.hanabi.in/repos/sana137.in.git
Log | Files | Refs | README | LICENSE

header.js (1115B)

      1 import PropTypes from 'prop-types';
      2 import React from 'react';
      3 import { graphql, useStaticQuery } from 'gatsby';
      4 
      5 const Header = ({ siteTitle, description, headerImg, hideName }) => {
      6   const data = useStaticQuery(graphql`
      7     query getHomeName {
      8       site {
      9         siteMetadata {
     10           homeName
     11         }
     12       }
     13     }
     14   `);
     15   const { homeName } = data.site.siteMetadata;
     16   return (
     17     <header
     18       style={{
     19         backgroundColor: `#86BD26`,
     20         backgroundImage: `url(${headerImg})`,
     21       }}
     22       className={'site-header outer'}
     23     >
     24       <div className={'inner'}>
     25         <div className={'site-header-content'}>
     26           <h1 style={{ margin: 0 }} className={'site-title'}>
     27             {siteTitle}
     28           </h1>
     29           <br />
     30           <h2 className={'site-description'}>{description}</h2>
     31           {!hideName && <h2>{homeName}</h2>}
     32         </div>
     33       </div>
     34     </header>
     35   );
     36 };
     37 
     38 Header.propTypes = {
     39   siteTitle: PropTypes.string,
     40   description: PropTypes.string,
     41 };
     42 
     43 Header.defaultProps = {
     44   siteTitle: `Sana's stories`,
     45   description: `Hi, I am Sana!`,
     46 };
     47 
     48 export default Header;