2018-11-09 12:20:29 +01:00
|
|
|
import React from 'react'
|
|
|
|
import { StaticQuery, graphql } from 'gatsby'
|
2020-07-01 11:24:21 +02:00
|
|
|
import { ReactComponent as Logo } from '@oceanprotocol/art/logo/logo.svg'
|
2018-11-09 12:20:29 +01:00
|
|
|
import Content from '../components/Content'
|
|
|
|
import styles from './HeaderHome.module.scss'
|
2021-09-14 13:13:05 +02:00
|
|
|
import SearchButton from '../components/Search/SearchButton'
|
2022-03-03 12:06:10 +01:00
|
|
|
import ToggleSwitch from './ToggleSwitch'
|
2021-09-13 00:07:51 +02:00
|
|
|
|
2018-11-09 12:20:29 +01:00
|
|
|
const HeaderHome = () => (
|
2020-07-01 11:24:21 +02:00
|
|
|
<StaticQuery
|
|
|
|
query={graphql`
|
|
|
|
query {
|
|
|
|
site {
|
|
|
|
siteMetadata {
|
|
|
|
siteTitle
|
|
|
|
siteDescription
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
`}
|
|
|
|
render={(data) => {
|
|
|
|
const { siteTitle, siteDescription } = data.site.siteMetadata
|
2018-11-09 12:20:29 +01:00
|
|
|
|
2020-07-01 11:24:21 +02:00
|
|
|
return (
|
|
|
|
<header className={styles.header}>
|
|
|
|
<Content>
|
|
|
|
<Logo className={styles.headerLogo} />
|
|
|
|
<h1 className={styles.headerTitle}>{siteTitle}</h1>
|
2021-09-14 13:13:05 +02:00
|
|
|
<p className={styles.headerDescription}>
|
2021-11-09 10:00:09 +01:00
|
|
|
{siteDescription}
|
2022-03-03 12:06:10 +01:00
|
|
|
<div className={styles.container}>
|
2021-11-09 10:00:09 +01:00
|
|
|
<SearchButton />
|
2021-09-14 13:13:05 +02:00
|
|
|
</div>
|
2022-03-03 12:06:10 +01:00
|
|
|
<div className={styles.container}>
|
|
|
|
<div style={{ display: 'inline-block' }}>
|
|
|
|
<ToggleSwitch />
|
|
|
|
</div>
|
|
|
|
</div>
|
2021-09-14 13:13:05 +02:00
|
|
|
</p>
|
2020-07-01 11:24:21 +02:00
|
|
|
</Content>
|
|
|
|
</header>
|
|
|
|
)
|
|
|
|
}}
|
|
|
|
/>
|
2018-11-09 12:20:29 +01:00
|
|
|
)
|
|
|
|
|
|
|
|
export default HeaderHome
|