GraphCMS example - Upgrade to React 17 / Tailwind 2 and next/image (#20772)

examples/cms-graphcms/components/avatar.js

+import Image from 'next/image'
+
 export default function Avatar({ name, picture }) {
   return (
     <div className="flex items-center">
-      <img src={picture} className="w-12 h-12 rounded-full mr-4" alt={name} />
+      <div className="w-12 h-12 relative mr-4">
+        <Image
+          src={picture}
+          layout="fill"
+          className="rounded-full"
+          alt={name}
+        />
+      </div>
       <div className="text-xl font-bold">{name}</div>
     </div>
   )

examples/cms-graphcms/components/cover-image.js

-import cn from 'classnames'
+import Image from 'next/image'
 import Link from 'next/link'
+import cn from 'classnames'
 
 export default function CoverImage({ title, url, slug }) {
   const image = (
-    <img
+    <Image
       width={2000}
       height={1000}
       alt={`Cover Image for ${title}`}

examples/cms-graphcms/components/more-stories.js

@@ -6,7 +6,7 @@ export default function MoreStories({ posts }) {
       <h2 className="mb-8 text-6xl md:text-7xl font-bold tracking-tighter leading-tight">
         More Stories
       </h2>
-      <div className="grid grid-cols-1 md:grid-cols-2 md:col-gap-16 lg:col-gap-32 row-gap-20 md:row-gap-32 mb-32">
+      <div className="grid grid-cols-1 md:grid-cols-2 md:gap-x-16 lg:gap-x-32 gap-y-20 md:gap-y-32 mb-32">
         {posts.map((post) => (
           <PostPreview
             key={post.slug}

examples/cms-graphcms/next.config.js

+module.exports = {
+  images: {
+    domains: ['media.graphcms.com'],
+  },
+}

examples/cms-graphcms/package.json

@@ -7,16 +7,18 @@
     "start": "next start"
   },
   "dependencies": {
+    "autoprefixer": "10.1.0",
     "classnames": "2.2.6",
     "date-fns": "2.10.0",
     "next": "latest",
-    "react": "^16.13.0",
-    "react-dom": "^16.13.0"
+    "postcss": "8.2.2",
+    "react": "17.0.1",
+    "react-dom": "17.0.1"
   },
   "devDependencies": {
-    "postcss-flexbugs-fixes": "^4.2.1",
+    "postcss-flexbugs-fixes": "^5.0.2",
     "postcss-preset-env": "^6.7.0",
-    "tailwindcss": "^1.4.6"
+    "tailwindcss": "2.0.2"
   },
   "license": "MIT"
 }