docs: Add AvailableFrom label (#6523)

This PR introduces the `AvailableFrom` label (a standard version and a
full-sized version). The purpose of this label is to inform users that
feature is available starting from a specified version and in all
subsequent versions.



https://github.com/user-attachments/assets/172c4930-75fd-41f1-8616-845e0832cdd1

packages/docs-reanimated/src/components/AvailableFrom/index.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import clsx from 'clsx';
+import { useColorMode } from '@docusaurus/theme-common';
+
+import styles from './styles.module.css';
+import Danger from '/static/img/danger.svg';
+import DangerDark from '/static/img/danger-dark.svg';
+
+interface Props {
+  version?: string;
+  isFull?: boolean;
+}
+
+export default function AvailableFrom({ version, isFull }: Props) {
+  const { colorMode } = useColorMode();
+  const isLightMode = colorMode === 'light';
+  const badgeThemeStyles = isLightMode ? styles.light : styles.dark;
+
+  const getBadgeContent = () => {
+    if (isFull) {
+      return (
+        <>
+          <div className={styles.infoIcon}>
+            {isLightMode ? <Danger /> : <DangerDark />}
+          </div>
+          <span>Available from Reanimated {version}</span>
+        </>
+      );
+    }
+
+    return <>Available from {version}</>;
+  };
+
+  return (
+    <div
+      className={clsx(
+        isFull ? styles.fullBadge : styles.badge,
+        badgeThemeStyles
+      )}>
+      {getBadgeContent()}
+    </div>
+  );
+}

packages/docs-reanimated/src/components/AvailableFrom/styles.module.css

@@ -0,0 +1,41 @@
+.badge {
+  display: inline-block;
+  border-radius: 8px;
+  font-size: 12px;
+  font-weight: 500;
+  padding: 0.25rem 0.5rem;
+  white-space: nowrap;
+  margin: 0 0.25rem;
+}
+
+.fullBadge {
+  padding: 1rem;
+  width: '100%';
+  border-radius: 8px;
+  display: flex !important;
+  flex-direction: row;
+  margin-bottom: 1rem;
+}
+
+.light {
+  background-color: var(--swm-yellow-light-40);
+  color: var(--swm-navy-light-100);
+}
+
+.dark {
+  background-color: var(--swm-yellow-dark-120);
+  color: var(--swm-off-white);
+}
+
+.infoIcon {
+  margin-right: 1rem;
+}
+
+.infoIcon > svg {
+  width: 14px;
+  height: 14px;
+}
+
+.version {
+  font-weight: 500;
+}

packages/docs-reanimated/src/theme/MDXComponents.js

@@ -7,6 +7,7 @@ import PlatformCompatibility from '@site/src/components/PlatformCompatibility';
 import ExampleVideo from '@site/src/components/ExampleVideo';
 import { Yes, No, Version, Spacer } from '@site/src/components/Compatibility';
 import Optional from '@site/src/components/Optional';
+import AvailableFrom from '@site/src/components/AvailableFrom';
 import Indent from '@site/src/components/Indent';
 import Row from '@site/src/components/Row';
 import Grid from '@site/src/components/Grid';
@@ -27,6 +28,7 @@ export default {
   Version,
   Spacer,
   Optional,
+  AvailableFrom,
   Indent,
   Row,
   Grid,