1
0
Fork 0
mirror of https://github.com/terribleplan/next.js.git synced 2024-01-19 02:48:18 +00:00
next.js/examples/with-react-md/pages/index.js

103 lines
3.1 KiB
JavaScript
Raw Normal View History

2017-02-02 12:10:59 +00:00
import Head from 'next/head'
import Link from 'next/link'
import { PureComponent } from 'react'
2017-02-02 12:10:59 +00:00
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'
/>
]
class NavigationLink extends PureComponent {
// NOTE: Don't try using Stateless (function) component here. `ref` is
// required by React-MD/AccessibleFakeButton, but Stateless components
// don't have one by design:
// https://github.com/facebook/react/issues/4936
render () {
const { href, as, children, ..._props } = this.props
return (
<div {..._props} style={{padding: 0}}>
<Link href={href} as={as}>
<a className='md-list-tile md-list-tile--mini' style={{width: '100%', overflow: 'hidden'}}>
{children}
</a>
</Link>
</div>
)
}
2017-02-02 12:10:59 +00:00
}
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>
)
}