archive/rsnext
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

with-material-ui example linked to mui-org/material-ui (#9605) (#9616)

Browse source
This commit is contained in:
Prabusah 2019-12-04 04:47:51 -06:00 committed by Tim Neutkens
parent 14c553c932
commit 743248f177
8 changed files with 2 additions and 287 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
examples/with-material-ui/README.md
View file

@ -1,36 +1,3 @@
# Next.js example
# material-ui example
## Deploy your own
Deploy the example using [ZEIT Now](https://zeit.co/now):
[![Deploy with ZEIT Now](https://zeit.co/button)](https://zeit.co/new/project?template=https://github.com/zeit/next.js/tree/canary/examples/with-material-ui)
## How to use
Download the example [or clone the repo](https://github.com/mui-org/material-ui):
```sh
curl https://codeload.github.com/mui-org/material-ui/tar.gz/master | tar -xz --strip=2 material-ui-master/examples/nextjs
cd nextjs
```
Install it and run:
```bash
npm install
npm run dev
# or
yarn
yarn dev
```
Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)):
```bash
now
```
## The idea behind the example
[Next.js](https://github.com/zeit/next.js) is a framework for server-rendered React apps.
This example have been moved here: [mui-org/material-ui](https://github.com/mui-org/material-ui/blob/master/examples/nextjs)

20
examples/with-material-ui/package.json
View file

@ -1,20 +0,0 @@
{
"name": "nextjs",
"version": "4.0.0",
"private": true,
"dependencies": {
"@material-ui/core": "latest",
"@material-ui/styles": "latest",
"@next/plugin-material-ui": "latest",
"clsx": "latest",
"next": "latest",
"prop-types": "latest",
"react": "latest",
"react-dom": "latest"
},
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start"
}
}

25
examples/with-material-ui/pages/_app.js
View file

@ -1,25 +0,0 @@
import React from 'react'
import App from 'next/app'
import Head from 'next/head'
import { ThemeProvider } from '@material-ui/styles'
import CssBaseline from '@material-ui/core/CssBaseline'
import theme from '../src/theme'
export default class MyApp extends App {
render() {
const { Component, pageProps } = this.props
return (
<React.Fragment>
<Head>
<title>My page</title>
</Head>
<ThemeProvider theme={theme}>
{/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
<CssBaseline />
<Component {...pageProps} />
</ThemeProvider>
</React.Fragment>
)
}
}

44
examples/with-material-ui/pages/about.js
View file

@ -1,44 +0,0 @@
import React from 'react'
import Container from '@material-ui/core/Container'
import Typography from '@material-ui/core/Typography'
import Box from '@material-ui/core/Box'
import MuiLink from '@material-ui/core/Link'
import Button from '@material-ui/core/Button'
import ProTip from '../src/ProTip'
import Link from '../src/Link'
function Copyright() {
return (
<Typography variant="body2" color="textSecondary" align="center">
{'Copyright © '}
<MuiLink color="inherit" href="https://material-ui.com/">
Your Website
</MuiLink>{' '}
{new Date().getFullYear()}
{'.'}
</Typography>
)
}
export default function About() {
return (
<Container maxWidth="sm">
<Box my={4}>
<Typography variant="h4" component="h1" gutterBottom>
Next.js example
</Typography>
<Button
variant="contained"
color="primary"
component={Link}
naked
href="/"
>
Go to the main page
</Button>
<ProTip />
<Copyright />
</Box>
</Container>
)
}

37
examples/with-material-ui/pages/index.js
View file

@ -1,37 +0,0 @@
import React from 'react'
import Container from '@material-ui/core/Container'
import Typography from '@material-ui/core/Typography'
import Box from '@material-ui/core/Box'
import MuiLink from '@material-ui/core/Link'
import ProTip from '../src/ProTip'
import Link from '../src/Link'
function Copyright() {
return (
<Typography variant="body2" color="textSecondary" align="center">
{'Copyright © '}
<MuiLink color="inherit" href="https://material-ui.com/">
Your Website
</MuiLink>{' '}
{new Date().getFullYear()}
{'.'}
</Typography>
)
}
export default function Index() {
return (
<Container maxWidth="sm">
<Box my={4}>
<Typography variant="h4" component="h1" gutterBottom>
Next.js example
</Typography>
<Link href="/about" color="secondary">
Go to the about page
</Link>
<ProTip />
<Copyright />
</Box>
</Container>
)
}

67
examples/with-material-ui/src/Link.js
View file

@ -1,67 +0,0 @@
import React from 'react'
import PropTypes from 'prop-types'
import clsx from 'clsx'
import { useRouter } from 'next/router'
import NextLink from 'next/link'
import MuiLink from '@material-ui/core/Link'
const NextComposed = React.forwardRef(function NextComposed(props, ref) {
const { as, href, prefetch, ...other } = props
return (
<NextLink href={href} prefetch={prefetch} as={as}>
<a ref={ref} {...other} />
</NextLink>
)
})
NextComposed.propTypes = {
as: PropTypes.string,
href: PropTypes.string,
prefetch: PropTypes.bool,
}
// A styled version of the Next.js Link component:
// https://nextjs.org/docs/#with-link
function Link(props) {
const {
activeClassName = 'active',
className: classNameProps,
innerRef,
naked,
...other
} = props
const router = useRouter()
const className = clsx(classNameProps, {
[activeClassName]: router.pathname === props.href && activeClassName,
})
if (naked) {
return <NextComposed className={className} ref={innerRef} {...other} />
}
return (
<MuiLink
component={NextComposed}
className={className}
ref={innerRef}
{...other}
/>
)
}
Link.propTypes = {
activeClassName: PropTypes.string,
as: PropTypes.string,
className: PropTypes.string,
href: PropTypes.string,
innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
naked: PropTypes.bool,
onClick: PropTypes.func,
prefetch: PropTypes.bool,
}
export default React.forwardRef((props, ref) => (
<Link {...props} innerRef={ref} />
))

37
examples/with-material-ui/src/ProTip.js
View file

@ -1,37 +0,0 @@
import React from 'react'
import { makeStyles } from '@material-ui/core/styles'
import Link from '@material-ui/core/Link'
import SvgIcon from '@material-ui/core/SvgIcon'
import Typography from '@material-ui/core/Typography'
function LightBulbIcon(props) {
return (
<SvgIcon {...props}>
<path d="M9 21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1H9v1zm3-19C8.14 2 5 5.14 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.86-3.14-7-7-7zm2.85 11.1l-.85.6V16h-4v-2.3l-.85-.6C7.8 12.16 7 10.63 7 9c0-2.76 2.24-5 5-5s5 2.24 5 5c0 1.63-.8 3.16-2.15 4.1z" />
</SvgIcon>
)
}
const useStyles = makeStyles(theme => ({
root: {
margin: theme.spacing(6, 0, 3),
},
lightBulb: {
verticalAlign: 'middle',
marginRight: theme.spacing(1),
},
}))
export default function ProTip() {
const classes = useStyles()
return (
<Typography className={classes.root} color="textSecondary">
<LightBulbIcon className={classes.lightBulb} />
Pro tip: See more{' '}
<Link href="https://material-ui.com/getting-started/templates/">
templates
</Link>{' '}
on the Material-UI documentation.
</Typography>
)
}

22
examples/with-material-ui/src/theme.js
View file

@ -1,22 +0,0 @@
import { createMuiTheme } from '@material-ui/core/styles'
import { red } from '@material-ui/core/colors'
// Create a theme instance.
const theme = createMuiTheme({
palette: {
primary: {
main: '#556cd6',
},
secondary: {
main: '#19857b',
},
error: {
main: red.A400,
},
background: {
default: '#fff',
},
},
})
export default theme