archive/rsnext
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Bumping up the rebass version (v1 - v4) and fixing components and styling for it. (#23342)

Browse source 
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:
jai-sharma 2021-04-20 01:18:38 +05:30 committed by GitHub
parent 76184ab0ca
commit 79e7370b39
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 55 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
examples/with-rebass/package.json
View file

@ -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"

89
examples/with-rebass/pages/index.js
View file

@ -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 justify="center">
<Box width={1 / 2}>
<Blockquote center fontSize={3} py={4}>
"Next.js is a minimalistic framework for server-rendered React
applications."
</Blockquote>
</Box>
<Box width={6 / 12}>
<Blockquote center fontSize={3} py={4}>
"Functional React UI component library, built with
styled-components"
</Blockquote>
</Box>
</Flex> </Flex>
</Container>
</Provider> <Box>
<Text center fontSize={3} py={4}>
"Next.js is a minimalistic framework for server-rendered React
applications."
</Text>
</Box>
<Box>
<Text center fontSize={3} py={2}>
"Functional React UI component library, built with
styled-components"
</Text>
</Box>
</Box>
</Box>
) )
} }