-
Notifications
You must be signed in to change notification settings - Fork 10.3k
/
banner.js
82 lines (73 loc) · 1.99 KB
/
banner.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
import React from "react"
import PropTypes from "prop-types"
import styled from "react-emotion"
import presets, { colors } from "../utils/presets"
import { rhythm, scale, options } from "../utils/typography"
const horizontalPadding = rhythm(1 / 2)
const backgroundColor = props =>
props.background ? props.background : colors.gatsby
const BannerContainer = styled("div")`
background-color: ${props => backgroundColor(props)};
height: ${presets.bannerHeight};
position: fixed;
width: 100%;
z-index: 3;
padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right);
`
const InnerContainer = styled("div")`
align-items: center;
display: flex;
height: ${presets.bannerHeight};
overflow-x: auto;
mask-image: ${`linear-gradient(to right, transparent, ${props =>
backgroundColor(props)} ${horizontalPadding}, ${props =>
backgroundColor(props)} 96%, transparent)`};
`
const Content = styled("div")`
color: ${colors.ui.bright};
font-family: ${options.headerFontFamily.join(`,`)};
font-size: ${scale(-1 / 5).fontSize};
padding-left: ${horizontalPadding};
padding-right: ${horizontalPadding};
-webkit-font-smoothing: antialiased;
white-space: nowrap;
`
const Link = styled("a")`
color: #fff;
span {
display: none;
${presets.Mobile} {
display: inline;
}
}
`
const Banner = ({ children, background }) => {
return (
<BannerContainer background={background} className="banner">
<InnerContainer>
{children ? (
<Content>{children}</Content>
) : (
<Content>
These are the docs for v2.
{` `}
<Link href="https://v1.gatsbyjs.org/">
View the v1 docs
<span>
{` `}
instead
</span>
</Link>
.
</Content>
)}
</InnerContainer>
</BannerContainer>
)
}
Banner.propTypes = {
children: PropTypes.node,
background: PropTypes.any,
}
export default Banner