diff --git a/examples/with-mdbreact/.gitignore b/examples/with-mdbreact/.gitignore new file mode 100644 index 0000000000000..87af23af33e81 --- /dev/null +++ b/examples/with-mdbreact/.gitignore @@ -0,0 +1,35 @@ +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. + +# dependencies +/node_modules +/.pnp +.pnp.js + +/.idea +# testing +/coverage + +# next.js +/.next/ +/out/ + +# production +/build + +# misc +.DS_Store +*.pem + +# debug +npm-debug.log* +yarn-debug.log* +yarn-error.log* + +# local env files +.env.local +.env.development.local +.env.test.local +.env.production.local + +# vercel +.vercel diff --git a/examples/with-mdbreact/README.md b/examples/with-mdbreact/README.md new file mode 100644 index 0000000000000..cf86a6a202c8e --- /dev/null +++ b/examples/with-mdbreact/README.md @@ -0,0 +1,21 @@ +# mdbreact Example + +This example shows how to use Next.js with [material design bootstrap for react ](https://mdbootstrap.com/docs/react). + +## Deploy your own + +Deploy the example using [Vercel](https://vercel.com): + +[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/git?s=https://github.com/vercel/next.js/tree/canary/examples/with-mdbreact) + +## How to use + +Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example: + +```bash +npx create-next-app --example with-mdbreact +# or +yarn create next-app --example with-mdbreact +``` + +Deploy it to the cloud with [Vercel](https://vercel.com/import?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/with-mdbreact/package.json b/examples/with-mdbreact/package.json new file mode 100644 index 0000000000000..ae8407f3833c3 --- /dev/null +++ b/examples/with-mdbreact/package.json @@ -0,0 +1,16 @@ +{ + "name": "with-mdbreact", + "version": "0.1.0", + "private": true, + "scripts": { + "dev": "next dev", + "build": "next build", + "start": "next start" + }, + "dependencies": { + "mdbreact": "^5.0.0", + "next": "10.0.3", + "react": "17.0.1", + "react-dom": "17.0.1" + } +} diff --git a/examples/with-mdbreact/pages/_app.js b/examples/with-mdbreact/pages/_app.js new file mode 100644 index 0000000000000..d19b16ba08f6f --- /dev/null +++ b/examples/with-mdbreact/pages/_app.js @@ -0,0 +1,10 @@ +import '@fortawesome/fontawesome-free/css/all.min.css' +import 'bootstrap-css-only/css/bootstrap.min.css' +import 'mdbreact/dist/css/mdb.css' +import '../styles/globals.css' + +function MyApp({ Component, pageProps }) { + return +} + +export default MyApp diff --git a/examples/with-mdbreact/pages/index.js b/examples/with-mdbreact/pages/index.js new file mode 100644 index 0000000000000..63110767b2eff --- /dev/null +++ b/examples/with-mdbreact/pages/index.js @@ -0,0 +1,118 @@ +import Head from 'next/head' +import { + MDBBtn, + MDBCard, + MDBCardBody, + MDBCardText, + MDBCardTitle, + MDBCol, + MDBContainer, + MDBFooter, + MDBRow, +} from 'mdbreact' + +export default function Home() { + return ( + <> + + NextJS with Material Design Bootstrap for React + + + +

+ Welcome to Next.js! +

+

+ Get started by editing pages/index.js +

+ + + + + Documentation + + Find in-depth information about Next.js features and API. + + + More → + + + + + + + + Learn + + Learn about Next.js in an interactive course with quizzes! + + + More → + + + + + + + + + + Examples + + Discover and deploy boilerplate example Next.js projects. + + + More → + + + + + + + + Deploy + + Instantly deploy your Next.js site to a public URL with + Vercel. + + + More → + + + + + + + Powered by + + Vercel Logo + + + + + ) +} diff --git a/examples/with-mdbreact/public/favicon.ico b/examples/with-mdbreact/public/favicon.ico new file mode 100644 index 0000000000000..4965832f2c9b0 Binary files /dev/null and b/examples/with-mdbreact/public/favicon.ico differ diff --git a/examples/with-mdbreact/public/vercel.svg b/examples/with-mdbreact/public/vercel.svg new file mode 100644 index 0000000000000..fbf0e25a651c2 --- /dev/null +++ b/examples/with-mdbreact/public/vercel.svg @@ -0,0 +1,4 @@ + + + \ No newline at end of file diff --git a/examples/with-mdbreact/styles/globals.css b/examples/with-mdbreact/styles/globals.css new file mode 100644 index 0000000000000..e5e2dcc23baf1 --- /dev/null +++ b/examples/with-mdbreact/styles/globals.css @@ -0,0 +1,16 @@ +html, +body { + padding: 0; + margin: 0; + font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, + Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; +} + +a { + color: inherit; + text-decoration: none; +} + +* { + box-sizing: border-box; +}