From e2119c068f5dc7533032749e42a3b4d891abb091 Mon Sep 17 00:00:00 2001
From: Alex Castle <atcastle@gmail.com>
Date: Tue, 9 Aug 2022 13:43:25 -0700
Subject: [PATCH] Add component wrapper in sizes documentation code snippet
 (#39437)

* Wrap sizes code snippets in component

* Don't remove docs import statement
---
 docs/api-reference/next/future/image.md | 20 +++++++++++---------
 docs/api-reference/next/image.md        | 20 +++++++++++---------
 2 files changed, 22 insertions(+), 18 deletions(-)

diff --git a/docs/api-reference/next/future/image.md b/docs/api-reference/next/future/image.md
index c81aded6bd12..be66624adbb7 100644
--- a/docs/api-reference/next/future/image.md
+++ b/docs/api-reference/next/future/image.md
@@ -263,15 +263,17 @@ For example, if you know your styling will cause an image to be full-width on mo
 
 ```js
 import Image from 'next/image'
-;<div className="grid-element">
-  <Image
-    src="/example.png"
-    layout="fill"
-    sizes="(min-width: 75em) 33vw,
-            (min-width: 48em) 50vw,
-            100vw"
-  />
-</div>
+const Example = () => (
+  <div className="grid-element">
+    <Image
+      src="/example.png"
+      layout="fill"
+      sizes="(min-width: 75em) 33vw,
+              (min-width: 48em) 50vw,
+              100vw"
+    />
+  </div>
+)
 ```
 
 This example `sizes` could have a dramatic effect on performance metrics. Without the `33vw` sizes, the image selected from the server would be 3 times as wide as it needs to be. Because file size is proportional to the square of the width, without `sizes` the user would download an image that's 9 times larger than necessary.
diff --git a/docs/api-reference/next/image.md b/docs/api-reference/next/image.md
index 8899d63634d4..b0b8a0ff3746 100644
--- a/docs/api-reference/next/image.md
+++ b/docs/api-reference/next/image.md
@@ -143,15 +143,17 @@ For example, if you know your styling will cause an image to be full-width on mo
 
 ```js
 import Image from 'next/image'
-;<div className="grid-element">
-  <Image
-    src="/example.png"
-    layout="fill"
-    sizes="(min-width: 75em) 33vw,
-            (min-width: 48em) 50vw,
-            100vw"
-  />
-</div>
+const Example = () => (
+  <div className="grid-element">
+    <Image
+      src="/example.png"
+      layout="fill"
+      sizes="(min-width: 75em) 33vw,
+              (min-width: 48em) 50vw,
+              100vw"
+    />
+  </div>
+)
 ```
 
 This example `sizes` could have a dramatic effect on performance metrics. Without the `33vw` sizes, the image selected from the server would be 3 times as wide as it needs to be. Because file size is proportional to the square of the width, without `sizes` the user would download an image that's 9 times larger than necessary.