Consolidate version requirement with beta banner

platform-includes/logs/requirements/react-native.mdx

@@ -1 +1 @@
-Logs for React Native are supported in Sentry React Native SDK version `7.0.0-beta.1` and above.
+<VersionRequirement product="Logs for React Native" sdk="Sentry React Native SDK" minVersion="7.0.0-beta.1" />

src/components/version-requirement.tsx

@@ -0,0 +1,36 @@
+import {ReactNode} from 'react';
+
+import {Alert} from './alert';
+
+export type VersionRequirementProps = {
+  // e.g., "Sentry React Native SDK"
+  minVersion: string;
+  product: string;
+  // e.g., "Logs for React Native"
+  sdk: string;
+  children?: ReactNode;
+  // e.g., "7.0.0-beta.1"
+  level?: 'info' | 'warning' | 'success'; // additional details, upgrade notes, links
+};
+
+/**
+ * VersionRequirement renders a prominent callout stating the minimum SDK version
+ * required for a given feature. It composes the shared Alert/Callout styles and
+ * can be reused by any product area (not limited to Logs).
+ */
+export function VersionRequirement({
+  product,
+  sdk,
+  minVersion,
+  level = 'warning',
+  children,
+}: VersionRequirementProps) {
+  return (
+    <Alert title="Version requirement" level={level}>
+      <p>
+        {product} requires {sdk} version <code>{minVersion}</code> or newer.
+      </p>
+      {children ? <div className="mt-2">{children}</div> : null}
+    </Alert>
+  );
+}

src/mdxComponents.ts

@@ -43,6 +43,7 @@ import {SdkOption} from './components/sdkOption';
 import {SignInNote} from './components/signInNote';
 import {SmartLink} from './components/smartLink';
 import {TableOfContents} from './components/tableOfContents';
+import {VersionRequirement} from './components/version-requirement';
 import {VimeoEmbed} from './components/video';
 
 export function mdxComponents(
@@ -93,6 +94,7 @@ export function mdxComponents(
     SandboxLink,
     SignInNote,
     VimeoEmbed,
+    VersionRequirement,
     a: SmartLink,
     img: DocImage,
     ...dynamicComponents,