From bbb8ff75a51a733837d9d15fd4657ce65bcfc562 Mon Sep 17 00:00:00 2001 From: Dan Zajdband Date: Sat, 22 Apr 2017 07:54:35 -0500 Subject: [PATCH] Add/semantic ui example (#1753) * Using developit/unfetch as the Fetch API polyfill * Added Semantic UI React example * Fixed linting issues --- examples/with-semantic-ui/README.md | 29 ++++++++++++++++++ examples/with-semantic-ui/package.json | 17 +++++++++++ examples/with-semantic-ui/pages/index.js | 38 ++++++++++++++++++++++++ 3 files changed, 84 insertions(+) create mode 100644 examples/with-semantic-ui/README.md create mode 100644 examples/with-semantic-ui/package.json create mode 100644 examples/with-semantic-ui/pages/index.js diff --git a/examples/with-semantic-ui/README.md b/examples/with-semantic-ui/README.md new file mode 100644 index 00000000..04d4a565 --- /dev/null +++ b/examples/with-semantic-ui/README.md @@ -0,0 +1,29 @@ + +# Semantic UI example + +## How to use + +Download the example [or clone the repo](https://github.com/zeit/next.js): + +```bash +curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/examples/with-semantic-ui +cd with-semantic-ui +``` + +Install it and run: + +```bash +npm install +npm run dev +``` + +Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)) + +```bash +now +``` + +## The idea behind the example + +This example shows how to use Next.js along with [Semantic UI React](http://react.semantic-ui.com). This is intended to show the integration of this +UI toolkit with the Framework, \ No newline at end of file diff --git a/examples/with-semantic-ui/package.json b/examples/with-semantic-ui/package.json new file mode 100644 index 00000000..18bbcc62 --- /dev/null +++ b/examples/with-semantic-ui/package.json @@ -0,0 +1,17 @@ +{ + "name": "with-semantic-ui", + "version": "1.0.0", + "scripts": { + "dev": "next", + "build": "next build", + "start": "next start" + }, + "dependencies": { + "next": "latest", + "react": "^15.4.2", + "react-dom": "^15.4.2", + "semantic-ui-react": "^0.68.0" + }, + "author": "", + "license": "ISC" +} diff --git a/examples/with-semantic-ui/pages/index.js b/examples/with-semantic-ui/pages/index.js new file mode 100644 index 00000000..93a817ce --- /dev/null +++ b/examples/with-semantic-ui/pages/index.js @@ -0,0 +1,38 @@ +import Head from 'next/head' +import { Modal, Header, Button, List } from 'semantic-ui-react' + +export default () => ( +
+ + + + Show Modal}> + Select a Photo + + +
Default Profile Image
+

We've found the following gravatar image associated with your e-mail address.

+

Is it okay to use this photo?

+ + + + + + + + Next.js + + + + + React + + + + + Vue.js + + + +
+)