Add badges to pages

Author: m-bert

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={['web']}>
+### onHoverIn
+</HeaderWithBadge>
 
 ```ts
 onHoverIn?: null | ((event: PressableEvent) => void);
 ```
 
 Called when pointer is hovering over the element.
 
-### onHoverOut (Web only)
+<HeaderWithBadge platforms={['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: 3
 ---
 
 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"

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

@@ -11,6 +11,8 @@ import BaseGestureCallbacks from './\_shared/base-gesture-callbacks.mdx';
 import BaseContinuousGestureCallbacks from './\_shared/base-continuous-gesture-callbacks.mdx';
 import SharedValueInfo from './\_shared/shared-value-info.md';
 
+import HeaderWithBadge from '@site/src/components/HeaderWithBadge';
+
 A gesture that allows other touch handling components to work within RNGH's gesture system. This streamlines interactions between gestures and the native component, allowing it to form [relations](/docs/fundamentals/gesture-composition) with other gestures.
 
 When used, the native component should be the direct child of a [`GestureDetector`](/docs/fundamentals/gesture-detectors#gesture-detector).
@@ -96,7 +98,10 @@ export default function App() {
 
 <SharedValueInfo />
 
-### shouldActivateOnStart (**Android only**)
+<HeaderWithBadge platforms={['android']}>
+### shouldActivateOnStart
+</HeaderWithBadge>
+
 
 ```ts
 shouldActivateOnStart: boolean | SharedValue<boolean>;

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

@@ -21,6 +21,8 @@ import SharedValueInfo from './\_shared/shared-value-info.md';
 
 import CollapsibleCode from '@site/src/components/CollapsibleCode';
 
+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}}>
@@ -209,23 +211,29 @@ When the finger moves outside this range (in points) along X axis and gesture ha
 If range is set as an array, first value must be lower or equal to 0, a the second one higher or equal to 0.
 If only one number `p` is given a range of `(-inf, p)` will be used if `p` is higher or equal to 0 and `(-p, inf)` otherwise.
 
-### averageTouches (Android only)
+<HeaderWithBadge platforms={['android']}>
+### averageTouches
+</HeaderWithBadge>
 
 ```ts
 averageTouches: boolean | SharedValue<boolean>;
 ```
 
 Android, by default, will calculate translation values based on the position of the leading pointer (the first one that was placed on the screen). This modifier allows that behavior to be changed to the one that is default on iOS - the averaged position of all active pointers will be used to calculate the translation values.
 
-### enableTrackpadTwoFingerGesture (iOS only)
+<HeaderWithBadge platforms={['iOS']}>
+### enableTrackpadTwoFingerGesture
+</HeaderWithBadge>
 
 ```ts
 enableTrackpadTwoFingerGesture: boolean | SharedValue<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"