chore: Overengineered a solution to image width problems on mobile

src/app/learn/network-composition/page.mdx

@@ -1,4 +1,5 @@
 import {HeroPattern} from "@/components/HeroPattern"
+import Diagram from "@/components/Diagram"
 
 <HeroPattern />
 
@@ -16,8 +17,10 @@ For users and developers, the permaweb offers low-cost, maintenance-free, and pe
 The AR.IO Network integrates decentralized protocols, services, and applications to power the permanent web alongside the traditional internet. 
 Foundational components like Arweave and AO are independently developed, while AR.IO introduces essential services and incentives that enable seamless interaction and accessibility. 
 
-<img src="https://arweave.net/ztJ2iYMIelFOwc4vXv8iYzPAES4bFCf-sdO5ZIc5bKI" />
-<div className="caption">Diagram 1: The Permanent Cloud Network</div>
+<Diagram src="https://arweave.net/ztJ2iYMIelFOwc4vXv8iYzPAES4bFCf-sdO5ZIc5bKI" title="Diagram 1" description="The Permanent Cloud Network" />
+
+{/* <img src="https://arweave.net/ztJ2iYMIelFOwc4vXv8iYzPAES4bFCf-sdO5ZIc5bKI" />
+<div className="caption">Diagram 1: The Permanent Cloud Network</div> */}
 
 Major Components of the Permanent Cloud: 
 

src/components/Diagram.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+
+interface DiagramProps {
+  src: string;
+  title?: string;
+  description?: string;
+}
+
+const Diagram: React.FC<DiagramProps> = ({ src, title, description }) => {
+  if (!src) {
+    console.error('Diagram component requires a valid src string.');
+    return null;
+  }
+
+  return (
+    <div className="flex flex-col items-center">
+      <img src={src} alt={title || 'Diagram'} className="max-w-full h-auto" />
+      {(title || description) && (
+        <p className="text-center text-sm mt-2">
+          {title && <strong>{title}</strong>}
+          {title && description && ': '}
+          {description}
+        </p>
+      )}
+    </div>
+  );
+};
+
+export default Diagram;