Merge pull request #843 from ethereum-optimism/callout-warning

Author: zainbacchus

components/WipCallout.tsx

@@ -37,3 +37,24 @@ export function WipCallout({ context }: Props): ReactElement {
     </div>
   );
 }
+
+export function InfoCallout({ context }: Props): ReactElement {
+  return (
+    <div className="custom-callouts nx-w-full nx-mt-6 nx-flex nx-justify-center nx-items-center nx-bg-white dark:nx-bg-black">
+      <div className="nx-w-full  nx-px-4 nx-text-center nx-font-medium nx-text-sm nx-text-left">
+        {context ? (
+          context
+        ) : (
+          <div className="nx-text-left">
+            Interop is currently in <strong>active development</strong> and not yet ready for production use. 
+            The information provided here may change frequently. 
+            <p>
+            We recommend checking back 
+            regularly for the most up-to-date information.
+            </p>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

pages/stack/protocol/interop/explainer.mdx

@@ -7,7 +7,11 @@ description: Learn the basics of interoperability on the OP Stack.
 import { Callout } from 'nextra/components'
 import Image from 'next/image'
 
-# Interoperability Explainer
+import { InfoCallout } from '@/components/WipCallout'
+
+<InfoCallout />
+
+# Interoperability Explainer 
 
 Interoperability is the ability for a blockchain to securely read the state of another blockchain. 
 Native OP Stack interoperability provides the ability to read messages and transfer assets across the Superchain (without having to go through L1) via secure message passing. This results in the following benefits: