feat(snippets): add center and noZoom properties to <Image> component

contribute/snippets/image.mdx

@@ -188,3 +188,21 @@ Examples:
 - `<Image src="<IMAGE>" width={50 + 50} />` — also the width of 100 pixels, but given as a number.
 
 See more: [`width` attribute on the `<img>` image embed element, MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/img#width).
+
+### `center`
+
+**type:** `boolean` <br />
+**default:** `false`
+
+Whether to horizontally center the image.
+
+Usage: `<Image src="<IMAGE>" center={true}/>`.
+
+### `noZoom`
+
+**type:** `boolean` <br />
+**default:** `false`
+
+Whether to disable the image zoom.
+
+Usage: `<Image src="<IMAGE>" noZoom={true}/>`.

contribute/snippets/overview.mdx

@@ -48,8 +48,9 @@ Keep formatting as simple as possible. Avoid components when a paragraph or seri
 
 <Card
   title="Steps"
-  icon="list-ordered"
+  icon="list-ol"
   href="https://www.mintlify.com/docs/components/steps"
+  horizontal="true"
 >
   Display sequential instructions in a numbered format.
 </Card>
@@ -58,6 +59,7 @@ Keep formatting as simple as possible. Avoid components when a paragraph or seri
   title="Code groups"
   icon="code"
   href="https://www.mintlify.com/docs/components/code-groups"
+  horizontal="true"
 >
   Display multiple code examples with a toggle.
 </Card>
@@ -66,6 +68,7 @@ Keep formatting as simple as possible. Avoid components when a paragraph or seri
   title="Cards"
   icon="square"
   href="https://www.mintlify.com/docs/components/cards"
+  horizontal="true"
 >
   Highlight content with customizable containers and icons. Prefer regular ordered or unordered Markdown lists and resort to cards only when the relevant links and content should stand out.
 </Card>
@@ -74,14 +77,16 @@ Keep formatting as simple as possible. Avoid components when a paragraph or seri
   title="Columns"
   icon="columns-3"
   href="https://www.mintlify.com/docs/components/columns"
+  horizontal="true"
 >
-  Arrange `<Card>` components in responsive layouts.
+  Arrange \<Card> components in responsive layouts.
 </Card>
 
 <Card
   title="Accordions"
   icon="chevron-down"
   href="https://www.mintlify.com/docs/components/accordions"
+  horizontal="true"
 >
   Expandable sections for progressive disclosure of content.
 </Card>
@@ -90,30 +95,34 @@ Keep formatting as simple as possible. Avoid components when a paragraph or seri
   title="Expandables"
   icon="chevrons-down"
   href="https://www.mintlify.com/docs/components/expandables"
+  horizontal="true"
 >
-  Show and hide detailed content on demand. Append the `expandable` keyword to the opening part of a code block to collapse large examples.
+  Show and hide detailed content on demand. Append the expandable keyword to the opening part of a code block to collapse large examples.
 </Card>
 
 <Card
   title="Badge"
   icon="award"
   href="https://www.mintlify.com/docs/components/badge"
+  horizontal="true"
 >
   Add inline labels and status indicators for outdated or deprecated items. Otherwise, avoid this component.
 </Card>
 
 <Card
   title="Tooltips"
-  icon="message-circle"
+  icon="message"
   href="https://www.mintlify.com/docs/components/tooltips"
+  horizontal="true"
 >
   Display additional information on hover without going too deep. Link to the [glossary](/foundations/glossary), a detailed explanation page, or a reference page instead.
 </Card>
 
 <Card
   title="Fields"
-  icon="text-cursor-input"
+  icon="input-text"
   href="https://www.mintlify.com/docs/components/fields"
+  horizontal="true"
 >
   Display parameter and property definitions, configuration options, or object fields.
 </Card>
@@ -122,28 +131,31 @@ Use either of the following components only on pages that document HTTP APIs. Be
 
 <Card
   title="Responses"
-  icon="arrow-left-right"
+  icon="arrow-left-arrow-right"
   href="https://www.mintlify.com/docs/components/responses"
+  horizontal="true"
 >
-  Show `<ResponseField>` that describes API response structures and fields.
+  Show \<ResponseField> that describes API response structures and fields.
 </Card>
 
 <Card
   title="Examples"
   icon="file-code"
   href="https://www.mintlify.com/docs/components/examples"
+  horizontal="true"
 >
-  Show `<RequestExample>` and `<ResponseExample>` side by side.
+  Show \<RequestExample> and \<ResponseExample> side by side.
 </Card>
 
 When explaining a complex topic or writing a tutorial, use concise diagrams to clarify behavior that text and code cannot.
 
 <Card
   title="Mermaid diagrams"
-  icon="git-branch"
+  icon="chart-diagram"
   href="https://www.mintlify.com/docs/components/mermaid-diagrams"
+  horizontal="true"
 >
-  Use code blocks with `mermaid` syntax to create flowcharts, sequence diagrams, and more.
+  Use code blocks with [Mermaid.js](https://mermaid.js.org/) syntax to create flowcharts, sequence diagrams, and more.
 </Card>
 
 ### Do not use

snippets/image.jsx

@@ -8,9 +8,22 @@
  *   target?: '_self' | '_blank' | '_parent' | '_top' | '_unfencedTop',
  *   height?: string | number,
  *   width?: string | number,
+ *   noZoom?: string | boolean,
+ *   center?: string | boolean,
  * }} props
  */
-export const Image = ({ src, darkSrc, alt = "", darkAlt, href, target, height = 342, width = 608 }) => {
+export const Image = ({
+  src,
+  darkSrc,
+  alt = '',
+  darkAlt,
+  href,
+  target,
+  height = 342,
+  width = 608,
+  noZoom = false,
+  center = false,
+}) => {
   const isSVG = src.match(/\.svg(?:[#?].*?)?$/i) !== null;
   const shouldInvert = isSVG && !darkSrc;
   const shouldCreateLink = href !== undefined;
@@ -75,6 +88,10 @@ export const Image = ({ src, darkSrc, alt = "", darkAlt, href, target, height =
   const heightPx = Number(height);
   const widthPx = Number(width);
 
+  // Typecast string | boolean values to boolean-only
+  const shouldCenter = center === "true" || center === true ? true : false;
+  const shouldNotZoom = noZoom === "true" || noZoom === true ? true : false;
+
   // Resulting images
   const images = (
     <>
@@ -85,7 +102,7 @@ export const Image = ({ src, darkSrc, alt = "", darkAlt, href, target, height =
         {...(height && { height: heightPx })}
         {...(width && { width: widthPx })}
         // @ts-ignore
-        {...((shouldCreateLink || shouldInvert) && { noZoom: "true" })}
+        {...((shouldCreateLink || shouldInvert || shouldNotZoom) && { noZoom: "true" })}
       />
       <img
         className={`hidden dark:block ${shouldInvert ? "invert" : ""}`}
@@ -94,20 +111,36 @@ export const Image = ({ src, darkSrc, alt = "", darkAlt, href, target, height =
         {...(height && { height: heightPx })}
         {...(width && { width: widthPx })}
         // @ts-ignore
-        {...((shouldCreateLink || shouldInvert) && { noZoom: "true" })}
+        {...((shouldCreateLink || shouldInvert || shouldNotZoom) && { noZoom: "true" })}
       />
     </>
   );
 
   // Is a clickable link
   if (shouldCreateLink) {
+    // Centered horizontally
+    if (shouldCenter) {
+      return (
+        <div style={{ display: "flex", justifyContent: "center" }}>
+          <a href={href} target={target ?? "_self"}>
+            {images}
+          </a>
+        </div>
+      );
+    }
+
     return (
       <a href={href} target={target ?? "_self"}>
         {images}
       </a>
     );
   }
 
-  // Not a link
+  // Not a link, centered horizontally
+  if (shouldCenter) {
+    return <div style={{ display: "flex", justifyContent: "center" }}>{images}</div>;
+  }
+
+  // Not a link, placed as is
   return images;
 };