From b7cad18490b12f7b418ec6997e9a81cf3427f1c9 Mon Sep 17 00:00:00 2001
From: "D. Kasi Pavan Kumar" <44864604+kasipavankumar@users.noreply.github.com>
Date: Tue, 25 Aug 2020 13:48:38 +0530
Subject: [PATCH] docs(image): fix image types (#377)

* fix(image): image width & height types in docs.

Fixed types of Image component's width & height in documentation.

* fix: typo in contributing.md
---
 .github/CONTRIBUTING.md          |  2 +-
 pages/en-us/components/image.mdx | 10 +++++-----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md
index 048fcbe..2eb409f 100644
--- a/.github/CONTRIBUTING.md
+++ b/.github/CONTRIBUTING.md
@@ -10,7 +10,7 @@ For basic operation of Git, you can refer to [GitHub's help documentation](https
 1. [Fork this repository](https://help.github.com/en/github/getting-started-with-github/fork-a-repo) to your own account and then clone it.
 2. Create a new branch for your changes: `git checkout -b {BRANCH_NAME}`.
 3. Install [Yarn](https://classic.yarnpkg.com/en/docs/install#mac-stable) and then update project dependenices: `yarn`.
-4. Run `yarn dev` and view your changes on your local document site. (If you add a new document page, you need to run `yarn dev` agian)
+4. Run `yarn dev` and view your changes on your local document site. (If you add a new document page, you need to run `yarn dev` again)
 
 At any time, you think it's ok, you can start the following steps to submit your amazing works:
 
diff --git a/pages/en-us/components/image.mdx b/pages/en-us/components/image.mdx
index 69447aa..fa8d191 100644
--- a/pages/en-us/components/image.mdx
+++ b/pages/en-us/components/image.mdx
@@ -14,7 +14,7 @@ Display image content.
   title="Basic"
   scope={{ Image }}
   code={`
-<Image width="540" height="160" src="/images/custom-domains.png" />
+<Image width={540} height={160} src="/images/custom-domains.png" />
 `}
 />
 
@@ -23,7 +23,7 @@ Display image content.
   desc="`Image` will show skeleton animation after `width` and `height` props are set."
   scope={{ Image }}
   code={`
-<Image width="540" height="160"
+<Image width={540} height={160}
   src="http://www.deelay.me/2000/https://react.geist-ui.dev/images/custom-domains.png" />
 `}
 />
@@ -34,7 +34,7 @@ Display image content.
   scope={{ Image, Display, Code }}
   code={`
 <Image.Browser url="https://react.geist-ui.dev/en-us/guide/introduction" anchorProps={{ rel: 'nofollow' }}>
-  <Image width="540" height="246" src="https://user-images.githubusercontent.com/11304944/76085431-fd036480-5fec-11ea-8412-9e581425344a.png" />
+  <Image width={540} height={246} src="https://user-images.githubusercontent.com/11304944/76085431-fd036480-5fec-11ea-8412-9e581425344a.png" />
 </Image.Browser>
 `}
 />
@@ -44,7 +44,7 @@ Display image content.
   scope={{ Image, Display, Code }}
   code={`
 <Image.Browser url="https://react.geist-ui.dev/en-us/guide/introduction" invert>
-  <Image width="540" height="246" src="https://user-images.githubusercontent.com/11304944/76085431-fd036480-5fec-11ea-8412-9e581425344a.png" />
+  <Image width={540} height={246} src="https://user-images.githubusercontent.com/11304944/76085431-fd036480-5fec-11ea-8412-9e581425344a.png" />
 </Image.Browser>
 `}
 />
@@ -55,7 +55,7 @@ Display image content.
   scope={{ Image, Display, Code }}
   code={`
 <Display shadow caption={<p>Set the <Code>height</Code> to reduces the possibility of page rerender.</p>}>
-  <Image width="540" height="246" src="/images/branch-domains.png" />
+  <Image width={540} height={246} src="/images/branch-domains.png" />
 </Display>
 `}
 />