-
-
Notifications
You must be signed in to change notification settings - Fork 551
/
page.tsx
61 lines (57 loc) · 1.63 KB
/
page.tsx
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
/** @jsx jsx */
import { animated, useSpring, config } from "react-spring"
import { Container, Styled, jsx, Flex } from "theme-ui"
import { MDXRenderer } from "gatsby-plugin-mdx"
import Layout from "./layout"
import SEO from "./seo"
import { ChildImageSharp } from "../types"
import Hero from "./hero"
type Props = {
data: {
page: {
title: string
slug: string
excerpt: string
body: string
cover: ChildImageSharp
}
}
}
const Page = ({ data: { page } }: Props) => {
const titleProps = useSpring({
config: config.slow,
from: { opacity: 0, transform: `translate3d(0, -30px, 0)` },
to: { opacity: 1, transform: `translate3d(0, 0, 0)` },
})
const contentProps = useSpring({ config: config.slow, delay: 1000, from: { opacity: 0 }, to: { opacity: 1 } })
return (
<Layout>
<SEO title={page.title} description={page.excerpt} pathname={page.slug} />
<Hero image={page.cover.childImageSharp.fluid} slim>
<Flex
sx={{
position: `absolute`,
bottom: 0,
left: 0,
right: 0,
maxWidth: `5xl`,
margin: `0 auto`,
padding: 4,
zIndex: 2,
flexDirection: `column`,
}}
>
<animated.div style={titleProps}>
<Styled.h1>{page.title}</Styled.h1>
</animated.div>
</Flex>
</Hero>
<Container>
<animated.div style={contentProps}>
<MDXRenderer>{page.body}</MDXRenderer>
</animated.div>
</Container>
</Layout>
)
}
export default Page