test

Author: dks333

react-components.mdx

@@ -5,7 +5,7 @@ icon: "react"
 ---
 
 import { Counter } from "/snippets/counter.mdx";
-import { ColorGenerator } from "/snippets/color-generator.mdx";
+import { ColorGenerator } from "/snippets/color-generator.jsx";
 
 [React components](https://react.dev) are a powerful way to create interactive and reusable elements in your documentation.
 

reusable-snippets.mdx

@@ -4,6 +4,11 @@ description: 'Reusable, custom snippets to keep content in sync'
 icon: 'recycle'
 ---
 
+import MintlifyIframe from "/snippets/iframe.jsx";
+
+<MintlifyIframe iframeUrl="https://mintlify.com/docs/quickstart" />
+
+
 One of the core principles of software development is DRY (Don't Repeat
 Yourself), which applies to documentation as
 well. If you find yourself repeating the same content in multiple places, you

snippets/iframe.jsx

@@ -0,0 +1,9 @@
+const MintlifyIframe = ({ iframeUrl }) => {
+  return (
+    <div className="w-full h-48">
+      <iframe src={iframeUrl} className="w-full h-full" />
+    </div>
+  )
+}
+
+export default MintlifyIframe;