From b6d89b2d0383762dec2fd572a79fc61dd194c262 Mon Sep 17 00:00:00 2001
From: bobinstein <cavanaugh.stephen1991@gmail.com>
Date: Tue, 14 Jan 2025 10:05:57 -0500
Subject: [PATCH] chore: Overengineered a solution to image width problems on
 mobile

---
 src/app/learn/network-composition/page.mdx |  7 ++++--
 src/components/Diagram.tsx                 | 29 ++++++++++++++++++++++
 2 files changed, 34 insertions(+), 2 deletions(-)
 create mode 100644 src/components/Diagram.tsx

diff --git a/src/app/learn/network-composition/page.mdx b/src/app/learn/network-composition/page.mdx
index c568a9c9..302948ce 100644
--- a/src/app/learn/network-composition/page.mdx
+++ b/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: 
 
diff --git a/src/components/Diagram.tsx b/src/components/Diagram.tsx
new file mode 100644
index 00000000..e0481956
--- /dev/null
+++ b/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;