[docs] Add platform badges (#3975)

## Description

This PR adds badges for platform specific features.

| darkmode | lightmode |
| ---------- | ---------- |
|<img width="802" height="126" alt="image"
src="https://github.com/user-attachments/assets/c5b190c4-9377-46c1-8abf-08a26a086011"
/> | <img width="704" height="128" alt="image"
src="https://github.com/user-attachments/assets/57d5ba62-4198-4718-afbe-732ef54f6b55"
/>|






## Test plan

Read docs 🤓

---------

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Jakub Piasecki <jakub.piasecki@swmansion.com>

Author: 3 people

packages/docs-gesture-handler/docs/components/buttons.mdx

@@ -7,6 +7,8 @@ sidebar_label: Buttons
 import useBaseUrl from '@docusaurus/useBaseUrl';
 import GifGallery from '@site/components/GifGallery';
 
+import HeaderWithBadge from '@site/src/components/HeaderWithBadge';
+
 <GifGallery>
   <img src={useBaseUrl('gifs/samplebutton.gif')} width="280" />
 </GifGallery>
@@ -37,39 +39,50 @@ exclusive?: boolean;
 
 Defines if more than one button could be pressed simultaneously. By default set to `true`.
 
-### rippleColor (**Android only**)
+<HeaderWithBadge platforms={['android']}>
+### rippleColor
+</HeaderWithBadge>
 
 ```ts
 rippleColor?: number | ColorValue | null;
 ```
 
 Defines [color](https://reactnative.dev/docs/colors) of native [ripple](https://developer.android.com/reference/android/graphics/drawable/RippleDrawable) animation.
 
-### rippleRadius (**Android only**)
+<HeaderWithBadge platforms={['android']}>
+### rippleRadius
+</HeaderWithBadge>
+
 
 ```ts
 rippleRadius?: number | null;
 ```
 
 Defines radius of native [ripple](https://developer.android.com/reference/android/graphics/drawable/RippleDrawable) animation.
 
-### borderless (**Android only**)
+<HeaderWithBadge platforms={['android']}>
+### borderless
+</HeaderWithBadge>
 
 ```ts
 borderless?: boolean;
 ```
 
 If set to `false`, [ripple](https://developer.android.com/reference/android/graphics/drawable/RippleDrawable) animation will render only within view bounds.
 
-### foreground (**Android only**)
+<HeaderWithBadge platforms={['android']}>
+### foreground
+</HeaderWithBadge>
 
 ```ts
 foreground?: boolean;
 ```
 
 Defines whether the [ripple](https://developer.android.com/reference/android/graphics/drawable/RippleDrawable) animation should be drawn on the foreground of the view.
 
-### touchSoundDisabled (**Android only**)
+<HeaderWithBadge platforms={['android']}>
+### touchSoundDisabled
+</HeaderWithBadge>
 
 ```ts
 touchSoundDisabled?: boolean;
@@ -127,7 +140,9 @@ underlayColor?: string;
 
 Background color that will be dimmed when button is in active state.
 
-### activeOpacity (**iOS only**)
+<HeaderWithBadge platforms={['iOS']}>
+### activeOpacity
+</HeaderWithBadge>
 
 ```ts
 activeOpacity?: number;
@@ -139,7 +154,9 @@ Opacity applied to the underlay when button is in active state.
 
 This type of button component should be used with simple icon-only or text-only buttons. The interaction will be different depending on platform: on Android a borderless ripple will be rendered (it means that the ripple will animate into a circle that can span outside of the view bounds), whereas on iOS the button will be dimmed (similar to how `TouchableOpacity` works). In addition to the props of [`BaseButton`](#basebutton), it accepts the following:
 
-### activeOpacity (**iOS only**)
+<HeaderWithBadge platforms={['iOS']}>
+### activeOpacity
+</HeaderWithBadge>
 
 ```ts
 activeOpacity?: number;

packages/docs-gesture-handler/docs/components/pressable.mdx

@@ -7,6 +7,8 @@ sidebar_label: Pressable
 import useBaseUrl from '@docusaurus/useBaseUrl';
 import GifGallery from '@site/components/GifGallery';
 
+import HeaderWithBadge from '@site/src/components/HeaderWithBadge';
+
 :::info
 This component is a drop-in replacement for the `Pressable` component.
 :::
@@ -87,31 +89,39 @@ cancelable?: null | boolean;
 
 Whether a press gesture can be interrupted by a parent gesture such as a scroll event. Defaults to `true`.
 
-### onHoverIn (Web only)
+<HeaderWithBadge platforms={['android', 'web']}>
+### onHoverIn
+</HeaderWithBadge>
 
 ```ts
 onHoverIn?: null | ((event: PressableEvent) => void);
 ```
 
 Called when pointer is hovering over the element.
 
-### onHoverOut (Web only)
+<HeaderWithBadge platforms={['android', 'web']}>
+### onHoverOut
+</HeaderWithBadge>
 
 ```ts
 onHoverOut?: null | ((event: PressableEvent) => void);
 ```
 
 Called when pointer stops hovering over the element.
 
-### delayHoverIn (Web only)
+<HeaderWithBadge platforms={['web']}>
+### delayHoverIn
+</HeaderWithBadge>
 
 ```ts
 delayHoverIn?: number | null;
 ```
 
 Duration to wait after hover in before calling `onHoverIn`.
 
-### delayHoverOut (Web only)
+<HeaderWithBadge platforms={['web']}>
+### delayHoverOut
+</HeaderWithBadge>
 
 ```ts
 delayHoverOut?: number | null;
@@ -135,7 +145,9 @@ disabled?: null | boolean;
 
 Whether the `Pressable` behavior is disabled.
 
-### hitSlop (Android & iOS only)
+<HeaderWithBadge platforms={['android', 'iOS']}>
+### hitSlop
+</HeaderWithBadge>
 
 ```ts
 hitSlop?: null | Insets | number;
@@ -145,7 +157,9 @@ Additional distance outside of the view in which a press is detected and [`onPre
 
 The `Insets` type is essentially the same as [`Rect`](https://reactnative.dev/docs/rect).
 
-### pressRetentionOffset (Android & iOS only)
+<HeaderWithBadge platforms={['android', 'iOS']}>
+### pressRetentionOffset
+</HeaderWithBadge>
 
 ```ts
 pressRetentionOffset?: null | Insets | number;
@@ -156,15 +170,19 @@ press before [`onPressOut`](#onpressout) is triggered.
 
 The `Insets` type is essentially the same as [`Rect`](https://reactnative.dev/docs/rect).
 
-### android_disableSound (Android only)
+<HeaderWithBadge platforms={['android']}>
+### android_disableSound
+</HeaderWithBadge>
 
 ```ts
 android_disableSound?: null | boolean;
 ```
 
 If `true`, doesn't play system sound on touch.
 
-### android_ripple (Android only)
+<HeaderWithBadge platforms={['android']}>
+### android_ripple
+</HeaderWithBadge>
 
 ```ts
 android_ripple?: null | PressableAndroidRippleConfig;

packages/docs-gesture-handler/docs/components/reanimated-drawer-layout.mdx

@@ -6,6 +6,8 @@ sidebar_label: Reanimated Drawer Layout
 
 import useBaseUrl from '@docusaurus/useBaseUrl';
 
+import HeaderWithBadge from '@site/src/components/HeaderWithBadge';
+
 :::info
 This component acts as a cross-platform replacement for React Native's [`DrawerLayoutAndroid`](http://reactnative.dev/docs/drawerlayoutandroid.html) component, written using [Reanimated](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started). For detailed information on standard parameters, please refer to the [React Native documentation](http://reactnative.dev/docs/drawerlayoutandroid.html).
 :::
@@ -132,7 +134,9 @@ export enum DrawerState {
 
 A function is called when the status of the drawer changes, taking `newState` to represent the drawer's interaction state and `drawerWillShow`, which is `true` when the drawer starts animating towards the open position and `false` otherwise.
 
-### enableTrackpadTwoFingerGesture (iOS only)
+<HeaderWithBadge platforms={['iOS']}>
+### enableTrackpadTwoFingerGesture
+</HeaderWithBadge>
 
 ```ts
 enableTrackpadTwoFingerGesture?: boolean;
@@ -149,7 +153,9 @@ children?: ReactNode | ((openValue?: SharedValue<number>) => ReactNode);
 
 Either a component rendered in the content view or a function. If `children` is a function, it receives an `openValue` parameter -  [`SharedValue`](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#shared-value) that indicates the progress of the drawer's opening or closing animation. This value equals `0` when the drawer is closed and `1` when it is fully opened. The drawer component can use this value to animate its children during the opening or closing process. This function must return a [`ReactNode`](https://reactnative.dev/docs/react-node).
 
-### mouseButton (Web & Android only)
+<HeaderWithBadge platforms={['android', 'web']}>
+### mouseButton
+</HeaderWithBadge>
 
 <CollapsibleCode 
 label="Show composed types definitions"
@@ -170,8 +176,9 @@ enum MouseButton {
 
 Allows users to choose which mouse button should handler respond to. Arguments can be combined using `|` operator, e.g. `mouseButton(MouseButton.LEFT | MouseButton.RIGHT)`. Default value is set to `MouseButton.LEFT`.
 
-
-### enableContextMenu (Web only)
+<HeaderWithBadge platforms={['web']}>
+### enableContextMenu
+</HeaderWithBadge>
 
 ```ts
 enableContextMenu: boolean;

packages/docs-gesture-handler/docs/components/reanimated_swipeable.mdx

@@ -7,6 +7,8 @@ sidebar_label: Reanimated Swipeable
 import useBaseUrl from '@docusaurus/useBaseUrl';
 import GifGallery from '@site/components/GifGallery'
 
+import HeaderWithBadge from '@site/src/components/HeaderWithBadge';
+
 :::info
 This component is a drop-in replacement for the `Swipeable` component, rewritten using [Reanimated](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started).
 :::
@@ -240,15 +242,19 @@ blocksExternalGesture?: AnyGesture | AnyGesture[];
 
 Gestures that `Swipeable` will prevent from activating (see [gesture composition section](/docs/fundamentals/gesture-composition#simultaneouswith)).
 
-### enableTrackpadTwoFingerGesture (iOS only)
+<HeaderWithBadge platforms={['iOS']}>
+### enableTrackpadTwoFingerGesture
+</HeaderWithBadge>
 
 ```ts
 enableTrackpadTwoFingerGesture?: boolean;
 ```
 
 Enables two-finger gestures on supported devices, for example iPads with trackpads. If not enabled the gesture will require click + drag, with `enableTrackpadTwoFingerGesture` swiping with two fingers will also trigger the gesture.
 
-### mouseButton (Web & Android only)
+<HeaderWithBadge platforms={['android', 'web']}>
+### mouseButton
+</HeaderWithBadge>
 
 <CollapsibleCode 
 label="Show composed types definitions"
@@ -269,7 +275,9 @@ enum MouseButton {
 
 Allows users to choose which mouse button should handler respond to. Arguments can be combined using `|` operator, e.g. `mouseButton(MouseButton.LEFT | MouseButton.RIGHT)`. Default value is set to `MouseButton.LEFT`.
 
-### enableContextMenu (Web only)
+<HeaderWithBadge platforms={['web']}>
+### enableContextMenu
+</HeaderWithBadge>
 
 ```ts
 enableContextMenu: boolean;

packages/docs-gesture-handler/docs/fundamentals/gesture-detector.mdx

@@ -6,7 +6,7 @@ sidebar_position: 4
 ---
 
 import CollapsibleCode from '@site/src/components/CollapsibleCode';
-
+import HeaderWithBadge from '@site/src/components/HeaderWithBadge';
 
 ## Gesture Detector
 
@@ -190,23 +190,29 @@ gesture: SingleGesture | ComposedGesture;
 
 A gesture object containing the configuration and callbacks. Can be any of the base gestures or any [`ComposedGesture`](/docs/fundamentals/gesture-composition).
 
-### userSelect (Web only)
+<HeaderWithBadge platforms={['web']}>
+### userSelect
+</HeaderWithBadge>
 
 ```ts
 userSelect: 'none' | 'auto' | 'text';
 ```
 
 This parameter allows to specify which `userSelect` property should be applied to underlying view. Default value is set to `"none"`.
 
-### touchAction (Web only)
+<HeaderWithBadge platforms={['web']}>
+### touchAction
+</HeaderWithBadge>
 
 ```ts
 touchAction: TouchAction;
 ```
 
 This parameter allows to specify which `touchAction` property should be applied to underlying view. Supports all CSS [touch-action](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/touch-action) values. Default value is set to `"none"`.
 
-### enableContextMenu (Web only)
+<HeaderWithBadge platforms={['web']}>
+### enableContextMenu
+</HeaderWithBadge>
 
 ```ts
 enableContextMenu: boolean;

packages/docs-gesture-handler/docs/gestures/_shared/base-gesture-config.mdx

@@ -1,5 +1,7 @@
 import CollapsibleCode from '@site/src/components/CollapsibleCode';
 
+import HeaderWithBadge from '@site/src/components/HeaderWithBadge';
+
 ### enabled
 
 ```ts
@@ -67,7 +69,9 @@ testID: string;
 
 Sets a `testID` property for gesture object, allowing for querying for it in tests.
 
-### cancelsTouchesInView (**iOS only**)
+<HeaderWithBadge platforms={['iOS']}>
+### cancelsTouchesInView
+</HeaderWithBadge>
 
 ```ts
 cancelsTouchesInView: boolean | SharedValue<boolean>;

packages/docs-gesture-handler/docs/gestures/use-fling-gesture.mdx

@@ -12,6 +12,8 @@ import useBaseUrl from '@docusaurus/useBaseUrl';
 import FlingGestureBasic from '@site/static/examples/FlingGestureBasic';
 import FlingGestureBasicSrc from '!!raw-loader!@site/static/examples/FlingGestureBasicSrc';
 
+import HeaderWithBadge from '@site/src/components/HeaderWithBadge';
+
 <div className={webContainer}>
   <div className={vanishOnMobile} style={{ display: 'flex', justifyContent: 'center', maxWidth: 360 }}>
     <video playsInline autoPlay muted loop style={{maxWidth: 360}}>
@@ -140,7 +142,9 @@ numberOfPointers: number | SharedValue<number>;
 
 Determine exact number of points required to handle the fling gesture.
 
-### mouseButton (Web & Android only)
+<HeaderWithBadge platforms={['android', 'web']}>
+### mouseButton
+</HeaderWithBadge>
 
 <CollapsibleCode 
 label="Show composed types definitions"

packages/docs-gesture-handler/docs/gestures/use-hover-gesture.mdx

@@ -12,6 +12,8 @@ import useBaseUrl from '@docusaurus/useBaseUrl';
 import HoverGestureBasic from '@site/static/examples/HoverGestureBasic';
 import HoverGestureBasicSrc from '!!raw-loader!@site/static/examples/HoverGestureBasic';
 
+import HeaderWithBadge from '@site/src/components/HeaderWithBadge';
+
 <div className={webContainer}>
   <div className={vanishOnMobile} style={{ display: 'flex', justifyContent: 'center', maxWidth: 360 }}>
     <video playsInline autoPlay muted loop style={{maxWidth: 360}}>
@@ -91,7 +93,9 @@ const styles = StyleSheet.create({
 
 <SharedValueInfo />
 
-### effect (iOS only)
+<HeaderWithBadge platforms={['iOS']}>
+### effect
+</HeaderWithBadge>
 
 <CollapsibleCode 
 label="Show composed types definitions"

packages/docs-gesture-handler/docs/gestures/use-long-press-gesture.mdx

@@ -12,6 +12,8 @@ import useBaseUrl from '@docusaurus/useBaseUrl';
 import LongPressGestureBasic from '@site/static/examples/LongPressGestureBasic';
 import LongPressGestureBasicSrc from '!!raw-loader!@site/static/examples/LongPressGestureBasic';
 
+import HeaderWithBadge from '@site/src/components/HeaderWithBadge';
+
 <div className={webContainer}>
   <div className={vanishOnMobile} style={{ display: 'flex', justifyContent: 'center', maxWidth: 360 }}>
     <video playsInline autoPlay muted loop style={{maxWidth: 360}}>
@@ -73,7 +75,9 @@ maxDistance: number | SharedValue<number>;
 
 Maximum distance, expressed in points, that defines how far the finger is allowed to travel during a long press gesture. If the finger travels further than the defined distance and the gesture hasn't yet activated, it will fail to recognize the gesture. The default value is 10.
 
-### mouseButton (Web & Android only)
+<HeaderWithBadge platforms={['android', 'web']}>
+### mouseButton
+</HeaderWithBadge>
 
 <CollapsibleCode 
 label="Show composed types definitions"