Platform flags

learn/react-native/react-native-overview.md

@@ -13,6 +13,38 @@ To develop fully Native apps, you do not need to learn additional programming sk
 
 ## Architecture
 
+### same line single <Flag name="android" />
+
+### same line multiple <Flag name="native" /> <Flag name="web" />
+
+### next line single
+<Flag name="native" style={{marginLeft:0}}/>
+
+### next line multiple
+<Flag name="native" style={{marginLeft:0}}/> <Flag name="android" /> <Flag name="ios" /> <Flag name="web"/>
+
+### default style for new flags <Flag name="some custom text" />
+
+## Example use cases
+
+### this section is only applicable for native <Flag name="native" />
+some description
+
+### this section is only applicable for web <Flag name="web" />
+some description
+
+### some other section
+some text
+
+<Flag name="web" style={{marginLeft:0}}/> - some web specific things
+
+<br />
+<br />
+<br />
+<Flag name="native" style={{marginLeft:0}}/>
+
+some native specific details, long para
+
 React Native is a mobile app framework from Facebook. It is based on ReactJS principles (Virtual DOM). You can define app UI using the React Native markup and extensions in JavaScript. React Native will render UI using native UI controls similar to native apps based on the UI definition in runtime.
 
 ![React Native Architecture](/learn/assets/react-native-architecture.png)

website/src/components/Flag.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import clsx from 'clsx';
+
+const PLATFORM_LABELS = {
+  android: 'Android',
+  ios: 'iOS',
+  native: 'React Native',
+  web: 'Web Only',
+};
+
+export default function Flag({ name, style, className }) {
+  const key = name?.toLowerCase();
+  const label = PLATFORM_LABELS[key] || name;
+  const combinedClassName = clsx('flag', `flag-${key?.replace(/\s+/g, '-')}`, className);
+  return <span className={combinedClassName} style={style}>{label}</span>;
+}

website/src/theme/MDXComponents.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import MDXComponents from '@theme-original/MDXComponents';
+import Flag from '@site/src/components/Flag';
+
+export default {
+  ...MDXComponents,
+  Flag,
+};

website/static/css/custom.css

@@ -1912,5 +1912,33 @@ h2.widget-header{
     }
 }
 
-
+.flag {
+    font-size: 0.8rem;
+    padding: 0.25rem 0.6rem;
+    border-radius: 0.25rem;
+    background-color: #eee;
+    color: #333;
+    margin-left: 0.25rem;
+    font-weight: var(--ifm-heading-font-weight);
+  }
+
+  .flag-android {
+    background-color: #a4c639;
+    color: black;
+  }
+
+  .flag-ios {
+    background-color: #007aff;
+    color: white;
+  }
+
+  .flag-web {
+    background-color: #f26522;
+    color: white;
+  }
+
+  .flag-native {
+    background-color: #6f42c1;
+    color: white;
+  }