add some basic examples

89089f55 · Guillermo Rauch · a9321714 · 89089f55 · 89089f55 · 89089f55
7 changed file
--- a/examples/basic-css/pages/index.js
+++ b/examples/basic-css/pages/index.js
+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'
+    }
+  }
+})
--- a/examples/head-elements/pages/index.js
+++ b/examples/head-elements/pages/index.js
+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>
+)
--- a/examples/hello-world/pages/about.js
+++ b/examples/hello-world/pages/about.js
+import React from 'react'
+export default () => (
+  <div>About us</div>
+)
--- a/examples/hello-world/pages/index.js
+++ b/examples/hello-world/pages/index.js
+import React from 'react'
+import Link from 'next/link'
+export default () => (
+  <div>Hello World. <Link href="/about">About</Link></div>
+)
--- a/examples/nested-components/components/paragraph.js
+++ b/examples/nested-components/components/paragraph.js
+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'
+  }
+})
--- a/examples/nested-components/components/post.js
+++ b/examples/nested-components/components/post.js
+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'
+  }
+})
--- a/examples/nested-components/pages/index.js
+++ b/examples/nested-components/pages/index.js
+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'
+    }
+  }
+})