Bumping up the rebass version (v1 - v4) and fixing components and styling for it. (#23342)
The with-rebass example was using an outdate version of rebass(v1) which was throwing all sorts of deprecated warnings in the terminal, I've bumped up the version to the latest(v4) and made necessary changes to index.js page to keep it working. If there is any issue, or some additional work needed, I am absolutely open to help. Love the next.js framework and work you guys are doing ✌.
This commit is contained in:
parent
76184ab0ca
commit
79e7370b39
2 changed files with 55 additions and 36 deletions
|
@ -12,7 +12,7 @@
|
||||||
"next": "latest",
|
"next": "latest",
|
||||||
"react": "^16.7.0",
|
"react": "^16.7.0",
|
||||||
"react-dom": "^16.7.0",
|
"react-dom": "^16.7.0",
|
||||||
"rebass": "1.0.0-1",
|
"rebass": "^4.0.7",
|
||||||
"styled-components": "^2.1.1"
|
"styled-components": "^2.1.1"
|
||||||
},
|
},
|
||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
|
|
|
@ -1,45 +1,64 @@
|
||||||
import {
|
import { Heading, Text, Link, Flex, Box } from 'rebass'
|
||||||
Provider,
|
|
||||||
Container,
|
|
||||||
Heading,
|
|
||||||
Blockquote,
|
|
||||||
Toolbar,
|
|
||||||
NavLink,
|
|
||||||
Flex,
|
|
||||||
Box,
|
|
||||||
} from 'rebass'
|
|
||||||
|
|
||||||
function HomePage() {
|
function HomePage() {
|
||||||
return (
|
return (
|
||||||
<Provider>
|
<Box
|
||||||
<Heading is="h1" children="Next.js + Rebass" mb={3} center />
|
sx={{
|
||||||
|
maxWidth: 1100,
|
||||||
|
mx: 'auto',
|
||||||
|
px: 3,
|
||||||
|
textAlign: 'center',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Heading
|
||||||
|
as="h1"
|
||||||
|
children="Next.js + Rebass"
|
||||||
|
mb={3}
|
||||||
|
fontSize={[4, 5, 6]}
|
||||||
|
/>
|
||||||
|
|
||||||
<Container>
|
<Box>
|
||||||
<Toolbar bg="black">
|
<Flex px={2} color="white" bg="black" alignItems="center">
|
||||||
<NavLink href="https://github.com/vercel/next.js/" target="_blank">
|
<Link
|
||||||
|
p={2}
|
||||||
|
fontWeight="bold"
|
||||||
|
href="https://github.com/vercel/next.js/"
|
||||||
|
sx={{
|
||||||
|
fontWeight: '600',
|
||||||
|
color: 'white',
|
||||||
|
textDecoration: 'none',
|
||||||
|
}}
|
||||||
|
>
|
||||||
Next.js
|
Next.js
|
||||||
</NavLink>
|
</Link>
|
||||||
<NavLink ml="auto" href="http://jxnblk.com/rebass/" target="_blank">
|
<Box mx="auto" />
|
||||||
|
<Link
|
||||||
|
variant="nav"
|
||||||
|
href="http://jxnblk.com/rebass/"
|
||||||
|
sx={{
|
||||||
|
fontWeight: '600',
|
||||||
|
color: 'white',
|
||||||
|
textDecoration: 'none',
|
||||||
|
}}
|
||||||
|
>
|
||||||
REBASS
|
REBASS
|
||||||
</NavLink>
|
</Link>
|
||||||
</Toolbar>
|
</Flex>
|
||||||
|
|
||||||
<Flex justify="center">
|
<Box>
|
||||||
<Box width={1 / 2}>
|
<Text center fontSize={3} py={4}>
|
||||||
<Blockquote center fontSize={3} py={4}>
|
|
||||||
"Next.js is a minimalistic framework for server-rendered React
|
"Next.js is a minimalistic framework for server-rendered React
|
||||||
applications."
|
applications."
|
||||||
</Blockquote>
|
</Text>
|
||||||
</Box>
|
</Box>
|
||||||
<Box width={6 / 12}>
|
<Box>
|
||||||
<Blockquote center fontSize={3} py={4}>
|
<Text center fontSize={3} py={2}>
|
||||||
"Functional React UI component library, built with
|
"Functional React UI component library, built with
|
||||||
styled-components"
|
styled-components"
|
||||||
</Blockquote>
|
</Text>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
</Box>
|
</Box>
|
||||||
</Flex>
|
|
||||||
</Container>
|
|
||||||
</Provider>
|
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue