react-multi-carousel updated deps and made a new code with typescript

examples/with-react-multi-carousel/README.md

@@ -8,8 +8,6 @@ Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_mediu
 
 [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-react-multi-carousel&project-name=with-react-multi-carousel&repository-name=with-react-multi-carousel)
 
-_Live Example: https://react-multi-carousel.vercel.app_
-
 ## 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), [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/), or [pnpm](https://pnpm.io) to bootstrap the example:
@@ -28,7 +26,3 @@ Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&ut
 
 - On the server-side, we detect the user's device to decide how many items we are showing and then using flex-basis to assign \* width to the carousel item.
 - On the client-side, old fashion getting width of the container and assign the average of it to each carousel item.
-
-The UI part of this example is copy paste from for the sake of simplicity. [with-material-ui](https://github.com/vercel/next.js/tree/canary/examples/with-material-ui)
-
-Source code is hosted on the [react-multi-carorusel](https://github.com/YIZHUANG/react-multi-carousel/tree/master/examples/ssr) repository.

examples/with-react-multi-carousel/components/carousel.tsx

@@ -0,0 +1,69 @@
+import Carousel from 'react-multi-carousel'
+import { ResponsiveType } from 'react-multi-carousel/lib/types'
+import 'react-multi-carousel/lib/styles.css'
+import Image from 'next/image'
+
+const CarouselNext = () => {
+  const BreakpointSlides: ResponsiveType = {
+    desktop: {
+      breakpoint: { max: 3000, min: 1024 },
+      items: 3,
+    },
+    tablet: {
+      breakpoint: { max: 1024, min: 530 },
+      items: 2,
+    },
+    mobile: {
+      breakpoint: { max: 530, min: 0 },
+      items: 1,
+    },
+  }
+
+  return (
+    <Carousel
+      responsive={BreakpointSlides}
+      ssr
+      infinite
+      itemClass="carousel-item"
+      autoPlay
+    >
+      <Image
+        alt="Gundam"
+        src="/brucetang.jpg"
+        layout="responsive"
+        width={700}
+        height={475}
+      />
+      <Image
+        alt="Musgo"
+        src="/cameronsmith.jpg"
+        layout="responsive"
+        width={700}
+        height={475}
+      />
+      <Image
+        alt="Valley"
+        src="/ganapathykumar.jpg"
+        layout="responsive"
+        width={700}
+        height={475}
+      />
+      <Image
+        alt="Beach"
+        src="/roanlavery.jpg"
+        layout="responsive"
+        width={700}
+        height={475}
+      />
+      <Image
+        alt="Torii"
+        src="/tianshuliu.jpg"
+        layout="responsive"
+        width={700}
+        height={475}
+      />
+    </Carousel>
+  )
+}
+
+export default CarouselNext

examples/with-react-multi-carousel/globals.css

@@ -0,0 +1,52 @@
+* {
+  box-sizing: border-box;
+}
+
+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;
+  min-height: 100vh;
+  background-color: #111;
+  color: #d9d9d9;
+}
+
+main {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+h1 {
+  margin: 2em 0;
+  padding: 0 0.5rem;
+  text-align: center;
+  font-size: 3rem;
+}
+
+a {
+  color: #0070f3;
+  text-decoration: none;
+}
+
+a:hover {
+  opacity: 0.8;
+}
+
+p {
+  font-size: 2rem;
+}
+
+.container {
+  padding: 2rem 1rem;
+  display: flex;
+  flex-flow: column nowrap;
+  width: 100%;
+}
+
+.carousel-item {
+  padding: 1em;
+  pointer-events: none;
+}

examples/with-react-multi-carousel/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

examples/with-react-multi-carousel/package.json

@@ -6,14 +6,15 @@
     "start": "next start"
   },
   "dependencies": {
-    "@material-ui/core": "^3.9.2",
-    "@material-ui/icons": "^3.0.2",
-    "jss": "^9.8.7",
-    "mobile-detect": "^1.4.3",
-    "next": "^9.3.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-jss": "^8.6.1",
-    "react-multi-carousel": "^1.2.5"
+    "next": "latest",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-multi-carousel": "^2.8.2"
+  },
+  "devDependencies": {
+    "@types/node": "^18.0.0",
+    "@types/react": "^18.0.14",
+    "@types/react-dom": "^18.0.5",
+    "typescript": "^4.7.4"
   }
 }

examples/with-react-multi-carousel/pages/_app.tsx

@@ -0,0 +1,8 @@
+import '../globals.css'
+import type { AppProps } from 'next/app'
+
+function MyApp({ Component, pageProps }: AppProps) {
+  return <Component {...pageProps} />
+}
+
+export default MyApp

examples/with-react-multi-carousel/pages/index.tsx

@@ -0,0 +1,24 @@
+import Head from 'next/head'
+import CarouselNext from '../components/carousel'
+
+export default function Home() {
+  return (
+    <>
+      <Head>
+        <title>Create Next App</title>
+        <meta name="description" content="Generated by create next app" />
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+      <main>
+        <h1>
+          Welcome to <a href="https://nextjs.org">Next.js!</a>
+        </h1>
+        <p>react-multi-carousel</p>
+
+        <div className="container">
+          <CarouselNext />
+        </div>
+      </main>
+    </>
+  )
+}