vercel · timneutkens · Feb 2, 2017 · Jan 31, 2017 · alexedev · Feb 2, 2017
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
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		../node_modules/react-md/dist/react-md.light_blue-yellow.min.css
Copy link alexedev Feb 1, 2017 Choose a reason for hiding this comment The reason will be displayed to describe this comment to others. Learn more. is it an import statement? I see it for the first time in a css file Copy link Contributor Author frol Feb 1, 2017 Choose a reason for hiding this comment The reason will be displayed to describe this comment to others. Learn more. @AlexDev It is a symlink. It is how it is presented in git. timneutkens reacted with thumbs up emoji Copy link alexedev Feb 1, 2017 Choose a reason for hiding this comment The reason will be displayed to describe this comment to others. Learn more. as I understand, to create it I need to `cd` into `static` and then run `ln -s ../node_modules/react-md/dist/react-md.light_blue-yellow.min.css react-md.light_blue-yellow.min.css` ? Copy link Contributor Author frol Feb 1, 2017 Choose a reason for hiding this comment The reason will be displayed to describe this comment to others. Learn more. Correct. Or you can just copy the file. It would be better to somehow integrate CSS and fonts bundling with Webpack, but I have no idea on how to implement this at the moment. Copy link alexedev Feb 2, 2017 Choose a reason for hiding this comment The reason will be displayed to describe this comment to others. Learn more. yeah, I see, thank you for all efforts and answers!