Add other badges

Author: m-bert

packages/docs-gesture-handler/src/components/HeaderWithBadge/index.tsx

@@ -0,0 +1,68 @@
+import { StyleSheet } from 'react-native';
+
+interface HeaderWithBadgeProps {
+  platforms: ('android' | 'ios' | 'web')[];
+  children?: React.ReactNode;
+}
+
+export function Badge({ platform }: { platform: 'android' | 'ios' | 'web' }) {
+  const platformBadge =
+    platform === 'android'
+      ? styles.androidBadge
+      : platform === 'ios'
+        ? styles.iosBadge
+        : platform === 'web'
+          ? styles.webBadge
+          : {};
+
+  return <div style={{ ...styles.badge, ...platformBadge }}>{platform}</div>;
+}
+
+export default function HeaderWithBadge({
+  platforms,
+  children,
+}: HeaderWithBadgeProps) {
+  return (
+    <div style={styles.container}>
+      {children}
+
+      {platforms.map((platform) => (
+        <Badge key={platform} platform={platform} />
+      ))}
+    </div>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    display: 'flex',
+    flexDirection: 'row',
+    gap: 10,
+    marginBottom: 20,
+  },
+
+  badge: {
+    borderRadius: 10,
+    paddingTop: 2,
+    paddingBottom: 2,
+    paddingLeft: 10,
+    paddingRight: 10,
+    color: 'white',
+
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-around',
+  },
+
+  androidBadge: {
+    backgroundColor: '#0f8142',
+  },
+
+  iosBadge: {
+    backgroundColor: '#000000',
+  },
+
+  webBadge: {
+    backgroundColor: '#1067c4',
+  },
+});