4d8d99e47e
* chore(example): convert `with-stitches` to TS * refactor: change arrow to declaration * refactor: change import default to `* as` * feat: add next.config.js * refactor: improve typing Co-authored-by: JJ Kasper <jj@jjsweb.site>
53 lines
1 KiB
TypeScript
53 lines
1 KiB
TypeScript
import Head from 'next/head'
|
|
import StitchesLogo from '../components/StitchesLogo'
|
|
import { styled } from '../stitches.config'
|
|
|
|
const Box = styled('div', {})
|
|
|
|
const Text = styled('p', {
|
|
fontFamily: '$system',
|
|
color: '$hiContrast',
|
|
})
|
|
|
|
const Link = styled('a', {
|
|
fontFamily: '$system',
|
|
textDecoration: 'none',
|
|
color: '$purple600',
|
|
})
|
|
|
|
const Container = styled('div', {
|
|
marginX: 'auto',
|
|
paddingX: '$3',
|
|
|
|
variants: {
|
|
size: {
|
|
1: {
|
|
maxWidth: '300px',
|
|
},
|
|
2: {
|
|
maxWidth: '585px',
|
|
},
|
|
3: {
|
|
maxWidth: '865px',
|
|
},
|
|
},
|
|
},
|
|
})
|
|
|
|
export default function Home() {
|
|
return (
|
|
<Box css={{ paddingY: '$6' }}>
|
|
<Head>
|
|
<title>Use Stitches with Next.js</title>
|
|
</Head>
|
|
<Container size={{ '@initial': '1', '@bp1': '2' }}>
|
|
<StitchesLogo />
|
|
<Text as="h1">Hello, from Stitches.</Text>
|
|
<Text>
|
|
For full documentation, visit{' '}
|
|
<Link href="https://stitches.dev">stitches.dev</Link>.
|
|
</Text>
|
|
</Container>
|
|
</Box>
|
|
)
|
|
}
|