Add VersionRequirement component for SDK version requirements

Co-authored-by: sergiy.dybskiy <[email protected]>

Author: cursoragent

docs/platforms/react-native/logs/index.mdx

@@ -7,7 +7,7 @@ sidebar_order: 5755
 
 <PlatformContent includePath="llm-rules-logs" />
 
-<Include name="feature-stage-beta-logs-react-native.mdx" />
+<Include name="feature-stage-beta-logs.mdx" />
 
 With Sentry Structured Logs, you can send text based log information from your applications to Sentry. Once in Sentry, these logs can be viewed alongside relevant errors, searched by text-string, or searched using their individual attributes.
 

includes/feature-stage-beta-logs-react-native.mdx

@@ -1 +1,3 @@
-Logs for React Native are supported in Sentry React Native SDK version `7.0.0-beta.1` and above. If you're on an older SDK, upgrade to `7.0.0-beta.1` or newer to use Logs.
+<VersionRequirement product="Logs for React Native" sdk="Sentry React Native SDK" minVersion="7.0.0-beta.1">
+If you're on an older SDK, upgrade to `7.0.0-beta.1` or newer to use Logs.
+</VersionRequirement>

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

@@ -0,0 +1,31 @@
+import {ReactNode} from 'react';
+
+import {Alert} from './alert';
+
+export type VersionRequirementProps = {
+  product: string; // e.g., "Logs for React Native"
+  sdk: string; // e.g., "Sentry React Native SDK"
+  minVersion: string; // e.g., "7.0.0-beta.1"
+  level?: 'info' | 'warning' | 'success';
+  children?: ReactNode; // 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}>
+      {product} requires {sdk} version `{minVersion}` or newer.
+      {children ? <div className="mt-2">{children}</div> : null}
+    </Alert>
+  );
+}

src/components/version-requirement.tsx

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