From 89089f5546555d41fcc37c2640aa1edbcdf5e7ee Mon Sep 17 00:00:00 2001 From: Guillermo Rauch Date: Sat, 15 Oct 2016 23:31:05 -0500 Subject: [PATCH] add some basic examples --- examples/basic-css/pages/index.js | 21 ++++++++ examples/head-elements/pages/index.js | 14 ++++++ examples/hello-world/pages/about.js | 4 ++ examples/hello-world/pages/index.js | 5 ++ .../nested-components/components/paragraph.js | 13 +++++ examples/nested-components/components/post.js | 23 +++++++++ examples/nested-components/pages/index.js | 48 +++++++++++++++++++ 7 files changed, 128 insertions(+) create mode 100644 examples/basic-css/pages/index.js create mode 100644 examples/head-elements/pages/index.js create mode 100644 examples/hello-world/pages/about.js create mode 100644 examples/hello-world/pages/index.js create mode 100644 examples/nested-components/components/paragraph.js create mode 100644 examples/nested-components/components/post.js create mode 100644 examples/nested-components/pages/index.js diff --git a/examples/basic-css/pages/index.js b/examples/basic-css/pages/index.js new file mode 100644 index 0000000000..9dead5b1a7 --- /dev/null +++ b/examples/basic-css/pages/index.js @@ -0,0 +1,21 @@ +import React from 'react' +import { css, StyleSheet } from 'next/css' + +export default () => ( +
+

Hello World

+
+) + +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' + } + } +}) diff --git a/examples/head-elements/pages/index.js b/examples/head-elements/pages/index.js new file mode 100644 index 0000000000..71a72f4a3a --- /dev/null +++ b/examples/head-elements/pages/index.js @@ -0,0 +1,14 @@ +import React from 'react' +import Head from 'next/head' + +export default () => ( +
+ + This page has a title 🤔 + + + + +

This page has a title 🤔

+
+) diff --git a/examples/hello-world/pages/about.js b/examples/hello-world/pages/about.js new file mode 100644 index 0000000000..759018a030 --- /dev/null +++ b/examples/hello-world/pages/about.js @@ -0,0 +1,4 @@ +import React from 'react' +export default () => ( +
About us
+) diff --git a/examples/hello-world/pages/index.js b/examples/hello-world/pages/index.js new file mode 100644 index 0000000000..d1b17869ff --- /dev/null +++ b/examples/hello-world/pages/index.js @@ -0,0 +1,5 @@ +import React from 'react' +import Link from 'next/link' +export default () => ( +
Hello World. About
+) diff --git a/examples/nested-components/components/paragraph.js b/examples/nested-components/components/paragraph.js new file mode 100644 index 0000000000..0332a3da95 --- /dev/null +++ b/examples/nested-components/components/paragraph.js @@ -0,0 +1,13 @@ +import React from 'react' +import { css, StyleSheet } from 'next/css' + +export default ({ children }) => ( +

{children}

+) + +const styles = StyleSheet.create({ + main: { + font: '13px Helvetica, Arial', + margin: '10px 0' + } +}) diff --git a/examples/nested-components/components/post.js b/examples/nested-components/components/post.js new file mode 100644 index 0000000000..8d90dd917a --- /dev/null +++ b/examples/nested-components/components/post.js @@ -0,0 +1,23 @@ +import React from 'react' +import { css, StyleSheet } from 'next/css' + +export default ({ title, children }) => ( +
+

{ title }

+ { children } +
+) + +const styles = StyleSheet.create({ + main: { + font: '15px Helvetica, Arial', + border: '1px solid #eee', + padding: '0 10px' + }, + + title: { + fontSize: '16px', + fontWeight: 'bold', + margin: '10px 0' + } +}) diff --git a/examples/nested-components/pages/index.js b/examples/nested-components/pages/index.js new file mode 100644 index 0000000000..ef0c632ade --- /dev/null +++ b/examples/nested-components/pages/index.js @@ -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 () => ( +
+ +

Hello there

+

This is an example of a componentized blog post

+ + +
+ + +

Hello there

+

This is another example.

+

Wa-hoo!

+ + +
+ + +

C'est fin

+ +
+) + +const 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' + } + } +}) -- GitLab