terribleplan/next.js
1
0
Fork 0
mirror of https://github.com/terribleplan/next.js.git synced 2024-01-19 02:48:18 +00:00
Code Issues Releases Wiki Activity

Merge pull request #11 from zeit/add/examples

Browse source 
Add some basic examples
This commit is contained in:
Dan Zajdband 2016-10-16 01:01:56 -04:00 committed by GitHub
parent 78fa6b191d 89089f5546
commit 418fb84475
7 changed files with 128 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
examples/basic-css/pages/index.js Normal file
View file

@ -0,0 +1,21 @@
import React from 'react'
import { css, StyleSheet } from 'next/css'
export default () => (
<div className={css(styles.main)}>
<p>Hello World</p>
</div>
)
const styles = StyleSheet.create({
main: {
font: '15px Helvetica, Arial, sans-serif',
background: '#eee',
padding: '100px',
textAlign: 'center',
transition: '100ms ease-in background',
':hover': {
background: '#ccc'
}
}
})

14
examples/head-elements/pages/index.js Normal file
View file

@ -0,0 +1,14 @@
import React from 'react'
import Head from 'next/head'
export default () => (
<div>
<Head>
<title>This page has a title 🤔</title>
<meta charSet="utf-8" />
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
</Head>
<h1>This page has a title 🤔</h1>
</div>
)

4
examples/hello-world/pages/about.js Normal file
View file

@ -0,0 +1,4 @@
import React from 'react'
export default () => (
<div>About us</div>
)

5
examples/hello-world/pages/index.js Normal file
View file

@ -0,0 +1,5 @@
import React from 'react'
import Link from 'next/link'
export default () => (
<div>Hello World. <Link href="/about">About</Link></div>
)

13
examples/nested-components/components/paragraph.js Normal file
View file

@ -0,0 +1,13 @@
import React from 'react'
import { css, StyleSheet } from 'next/css'
export default ({ children }) => (
<p className={css(styles.main)}>{children}</p>
)
const styles = StyleSheet.create({
main: {
font: '13px Helvetica, Arial',
margin: '10px 0'
}
})

23
examples/nested-components/components/post.js Normal file
View file

@ -0,0 +1,23 @@
import React from 'react'
import { css, StyleSheet } from 'next/css'
export default ({ title, children }) => (
<div className={css(styles.main)}>
<h1 className={css(styles.title)}>{ title }</h1>
{ children }
</div>
)
const styles = StyleSheet.create({
main: {
font: '15px Helvetica, Arial',
border: '1px solid #eee',
padding: '0 10px'
},
title: {
fontSize: '16px',
fontWeight: 'bold',
margin: '10px 0'
}
})

48
examples/nested-components/pages/index.js Normal file
View file

@ -0,0 +1,48 @@
import React from 'react'
import P from '../components/paragraph'
import Post from '../components/post'
import { css, StyleSheet } from 'next/css'
export default () => (
<div className={css(styles.main)}>
<Post title="My first blog post">
<P>Hello there</P>
<P>This is an example of a componentized blog post</P>
</Post>
<Hr />
<Post title="My second blog post">
<P>Hello there</P>
<P>This is another example.</P>
<P>Wa-hoo!</P>
</Post>
<Hr />
<Post title="The final blog post">
<P>C'est fin</P>
</Post>
</div>
)
const Hr = () => <hr className={css(styles.hr)} />
const styles = StyleSheet.create({
main: {
margin: 'auto',
maxWidth: '420px',
padding: '10px'
},
hr: {
width: '100px',
borderWidth: 0,
margin: '20px auto',
textAlign: 'center',
':before': {
content: '"***"',
color: '#ccc'
}
}
})