[Docs] Updated image-component example

examples/image-component/components/code.module.css

@@ -0,0 +1,10 @@
+.root {
+  color: #be00ff;
+  font-size: 16px;
+  white-space: pre-wrap;
+}
+
+.root::before,
+.root::after {
+  content: '`';
+}

examples/image-component/components/code.tsx

@@ -0,0 +1,6 @@
+import { PropsWithChildren } from 'react'
+import styles from './code.module.css'
+
+export default function Code(props: PropsWithChildren) {
+  return <code className={styles.root} {...props} />
+}

examples/image-component/components/divider.module.css

@@ -0,0 +1,5 @@
+.root {
+  border: 0;
+  border-top: 1px solid #333;
+  margin: 1.5rem 0;
+}

examples/image-component/components/divider.tsx

@@ -0,0 +1,5 @@
+import styles from './divider.module.css'
+
+export default function Divider() {
+  return <hr className={styles.root} />
+}

examples/image-component/components/view-source.module.css → examples/image-component/components/layout.module.css

@@ -1,8 +1,19 @@
+.card {
+  max-width: 60rem;
+  box-shadow: -10px 10px 80px rgba(255, 255, 255, 0.1);
+  border: 1px solid #333;
+  border-radius: 8px;
+  padding: 2rem;
+  margin: 0 auto;
+  background-color: rgba(0, 0, 0, 0.4);
+}
+
 .svg {
   position: absolute;
   top: 0;
   right: 0;
 }
+
 .arm {
   transform-origin: 130px 106px;
 }

examples/image-component/components/layout.tsx

@@ -0,0 +1,33 @@
+import type { PropsWithChildren } from 'react'
+import { useRouter } from 'next/router'
+import styles from './layout.module.css'
+
+export default function Layout({ children }: PropsWithChildren) {
+  const { asPath } = useRouter()
+  const pagePath = `/pages/${asPath || 'index'}.tsx`
+  return (
+    <>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="80"
+        height="80"
+        viewBox="0 0 250 250"
+        fill="#151513"
+        className={styles.svg}
+      >
+        <a
+          title="View Source"
+          href={`https://github.com/vercel/next.js/tree/canary/examples/image-component${pagePath}`}
+        >
+          <path d="M0 0l115 115h15l12 27 108 108V0z" fill="#ffffffba" />
+          <path
+            className={styles.arm}
+            d="M128 109c-15-9-9-19-9-19 3-7 2-11 2-11-1-7 3-2 3-2 4 5 2 11 2 11-3 10 5 15 9 16"
+          />
+          <path d="M115 115s4 2 5 0l14-14c3-2 6-3 8-3-8-11-15-24 2-41 5-5 10-7 16-7 1-2 3-7 12-11 0 0 5 3 7 16 4 2 8 5 12 9s7 8 9 12c14 3 17 7 17 7-4 8-9 11-11 11 0 6-2 11-7 16-16 16-30 10-41 2 0 3-1 7-5 11l-12 11c-1 1 1 5 1 5z" />
+        </a>
+      </svg>
+      <main className={styles.card}>{children}</main>
+    </>
+  )
+}

examples/image-component/package.json

@@ -7,7 +7,12 @@
   },
   "dependencies": {
     "next": "latest",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/node": "18.7.14",
+    "@types/react": "18.0.18",
+    "typescript": "4.8.2"
   }
 }

examples/image-component/pages/_app.tsx

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

examples/image-component/pages/background.tsx

@@ -0,0 +1,41 @@
+import Image from 'next/image'
+
+export default function BackgroundPage() {
+  return (
+    <>
+      <div
+        style={{
+          position: 'fixed',
+          height: '100vh',
+          width: '100vw',
+          overflow: 'hidden',
+          top: 0,
+          left: 0,
+          zIndex: -10,
+          pointerEvents: 'none',
+        }}
+      >
+        <Image
+          alt="Mountains"
+          src="/mountains.jpg"
+          layout="fill"
+          objectFit="cover"
+          quality={100}
+        />
+      </div>
+      <p
+        style={{
+          margin: 0,
+          fontSize: '2rem',
+          lineHeight: '3rem',
+          textAlign: 'center',
+          textShadow: '1px 1px 1px #3c5c5e',
+        }}
+      >
+        Image Component
+        <br />
+        as a Background
+      </p>
+    </>
+  )
+}

examples/image-component/pages/color.tsx

@@ -0,0 +1,40 @@
+import Image from 'next/image'
+
+// Pixel GIF code adapted from https://stackoverflow.com/a/33919020/266535
+const keyStr =
+  'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/='
+
+const triplet = (e1: number, e2: number, e3: number) =>
+  keyStr.charAt(e1 >> 2) +
+  keyStr.charAt(((e1 & 3) << 4) | (e2 >> 4)) +
+  keyStr.charAt(((e2 & 15) << 2) | (e3 >> 6)) +
+  keyStr.charAt(e3 & 63)
+
+const rgbDataURL = (r: number, g: number, b: number) =>
+  `data:image/gif;base64,R0lGODlhAQABAPAA${
+    triplet(0, r, g) + triplet(b, 255, 255)
+  }/yH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==`
+
+export default function ColorPage() {
+  return (
+    <>
+      <h1>Image Component With Color Data URL</h1>
+      <Image
+        alt="Dog"
+        src="/dog.jpg"
+        placeholder="blur"
+        blurDataURL={rgbDataURL(237, 181, 6)}
+        width={750}
+        height={1000}
+      />
+      <Image
+        alt="Cat"
+        src="/cat.jpg"
+        placeholder="blur"
+        blurDataURL={rgbDataURL(2, 129, 210)}
+        width={750}
+        height={1000}
+      />
+    </>
+  )
+}

examples/image-component/pages/index.js → examples/image-component/pages/index.tsx

@@ -1,15 +1,12 @@
-import styles from '../styles.module.css'
 import Image from 'next/image'
 import Link from 'next/link'
-import ViewSource from '../components/view-source'
+import Code from '../components/code'
+import Divider from '../components/divider'
 import vercel from '../public/vercel.png'
 
-const Code = (p) => <code className={styles.inlineCode} {...p} />
-
-const Index = () => (
-  <div className={styles.container}>
-    <ViewSource pathname="pages/index.js" />
-    <div className={styles.card}>
+export default function IndexPage() {
+  return (
+    <>
       <h1>Image Component with Next.js</h1>
       <p>
         This page demonstrates the usage of the{' '}
@@ -25,7 +22,7 @@ const Index = () => (
         </a>{' '}
         images on-demand as the browser requests them.
       </p>
-      <hr className={styles.hr} />
+      <Divider />
       <h2 id="layout">Layout</h2>
       <p>
         The <Code>layout</Code> property tells the image to respond differently
@@ -62,7 +59,7 @@ const Index = () => (
           </Link>
         </li>
       </ul>
-      <hr className={styles.hr} />
+      <Divider />
       <h2 id="placeholder">Placeholder</h2>
       <p>
         The <Code>placeholder</Code> property tells the image what to do while
@@ -93,7 +90,7 @@ const Index = () => (
           </Link>
         </li>
       </ul>
-      <hr className={styles.hr} />
+      <Divider />
       <h2 id="internal">Internal Image</h2>
       <p>
         The following is an example of a reference to an internal image from the{' '}
@@ -104,7 +101,7 @@ const Index = () => (
         image.
       </p>
       <Image alt="Vercel logo" src={vercel} width={1000} height={1000} />
-      <hr className={styles.hr} />
+      <Divider />
       <h2 id="external">External Image</h2>
       <p>
         The following is an example of a reference to an external image at{' '}
@@ -120,7 +117,7 @@ const Index = () => (
         width={1200}
         height={400}
       />
-      <hr className={styles.hr} />
+      <Divider />
       <h2 id="more">Learn More</h2>
       <p>
         You can optionally configure a cloud provider, device sizes, and more!
@@ -132,8 +129,6 @@ const Index = () => (
         </a>{' '}
         to learn more.
       </p>
-    </div>
-  </div>
-)
-
-export default Index
+    </>
+  )
+}