Added React-MD example (#940)

vercel · Feb 2, 2017 · 0a2466a · 0a2466a
1 parent 59281ad
commit 0a2466a
Show file tree

Hide file tree

Showing 4 changed files with 144 additions and 0 deletions.
diff --git a/examples/with-react-md/README.md b/examples/with-react-md/README.md
@@ -0,0 +1,30 @@
+
+# Example app with react-md
+
+## 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-react-md
+cd with-react-md
+```
+
+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 features how yo use [react-md](https://react-md.mlaursen.com/) (React Material Design) with Next.js.
+
+I recommend reading [layout-component](../layout-component) example next to learn how to reuse the layout across the pages.
diff --git a/examples/with-react-md/package.json b/examples/with-react-md/package.json
@@ -0,0 +1,19 @@
+{
+  "name": "with-react-md",
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "next",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "next": "^2.0.0-beta",
+    "react": "^15.4.2",
+    "react-addons-css-transition-group": "^15.4.2",
+    "react-addons-transition-group": "^15.4.2",
+    "react-dom": "^15.4.2",
+    "react-md": "^1.0.1"
+  },
+  "author": "",
+  "license": "ISC"
+}
diff --git a/examples/with-react-md/pages/index.js b/examples/with-react-md/pages/index.js
@@ -0,0 +1,94 @@
+import Head from 'next/head'
+import Link from 'next/link'
+
+import Avatar from 'react-md/lib/Avatars'
+import Button from 'react-md/lib/Buttons/Button'
+import FontIcon from 'react-md/lib/FontIcons'
+import ListItem from 'react-md/lib/Lists/ListItem'
+import NavigationDrawer from 'react-md/lib/NavigationDrawers'
+import SelectField from 'react-md/lib/SelectFields'
+
+const avatarSrc = 'https://cloud.githubusercontent.com/assets/13041/19686250/971bf7f8-9ac0-11e6-975c-188defd82df1.png'
+
+const drawerHeaderChildren = [
+  <Avatar
+    key={avatarSrc}
+    src={avatarSrc}
+    role='presentation'
+    iconSized
+    style={{ alignSelf: 'center', marginLeft: 16, marginRight: 16, flexShrink: 0 }}
+  />,
+  <SelectField
+    id='account-switcher'
+    defaultValue='Jonathan'
+    menuItems={['Jonathan', 'Fred']}
+    key='account-switcher'
+    position={SelectField.Positions.BELOW}
+    className='md-select-field--toolbar'
+  />
+]
+
+const NavigationLink = (props) => {
+  const { href, as, children, ..._props } = props
+  return (
+    <div {..._props}>
+      <Link href={href} as={as}>
+        <a className='md-list-tile' style={{padding: 0, overflow: 'hidden'}}>
+          {children}
+        </a>
+      </Link>
+    </div>
+  )
+}
+
+export default () => {
+  const closeButton = (
+    <Button
+      icon
+      tooltipLabel='Close the interactive demo'
+      tooltipDelay={150}
+      tooltipPosition='left'
+    >
+      close
+    </Button>
+  )
+
+  return (
+    <div>
+      <Head>
+        <link rel='stylesheet' href='/static/react-md.light_blue-yellow.min.css' />
+        <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto:300,400,500' />
+        <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Material+Icons' />
+      </Head>
+      <NavigationDrawer
+        navItems={[
+          <ListItem
+            key='0'
+            component={NavigationLink}
+            href='/'
+            leftIcon={<FontIcon>inbox</FontIcon>}
+            tileClassName='md-list-tile--mini'
+            primaryText={'Root'}
+          />,
+          <ListItem
+            key='1'
+            component={NavigationLink}
+            href='/non-existing-page'
+            leftIcon={<FontIcon>star</FontIcon>}
+            tileClassName='md-list-tile--mini'
+            primaryText={'404 page'}
+          />
+        ]}
+        contentClassName='md-grid'
+        drawerHeaderChildren={drawerHeaderChildren}
+        mobileDrawerType={NavigationDrawer.DrawerTypes.TEMPORARY_MINI}
+        tabletDrawerType={NavigationDrawer.DrawerTypes.PERSISTENT_MINI}
+        desktopDrawerType={NavigationDrawer.DrawerTypes.PERSISTENT_MINI}
+        toolbarTitle='Hello, World!'
+        toolbarActions={closeButton}
+      >
+        <h1>Hello Next.js!</h1>
+      </NavigationDrawer>
+    </div>
+  )
+}
diff --git a/examples/with-react-md/static/react-md.light_blue-yellow.min.css b/examples/with-react-md/static/react-md.light_blue-yellow.min.css
@@ -0,0 +1 @@
+../node_modules/react-md/dist/react-md.light_blue-yellow.min.css