1import React from 'react';
2import { View, Text, StyleSheet, StyleProp, TextStyle, ViewStyle } from 'react-native';
3
4import { Platform } from './index.types';
5
6function joinWithCamelCase<T extends string, H extends string>([first, second]: [
7  H,
8  T,
9]): `${H}${Capitalize<T>}` {
10  return `${first}${second.charAt(0).toUpperCase()}${second.slice(1)}` as `${H}${Capitalize<T>}`;
11}
12
13function PlatformIndicator({ platform, textStyle }: { platform: Platform; textStyle?: TextStyle }) {
14  return (
15    <View style={[styles.platform, styles[joinWithCamelCase(['platform', platform])]]}>
16      <Text style={[styles.platformText, textStyle]}>{platform}</Text>
17    </View>
18  );
19}
20
21export default function Platforms({
22  platforms,
23  style,
24  textStyle,
25}: {
26  platforms: Platform[];
27  style?: StyleProp<ViewStyle>;
28  textStyle?: TextStyle;
29}) {
30  return (
31    <View style={[styles.container, style]}>
32      {platforms.map((platform) => (
33        <PlatformIndicator key={platform} platform={platform} textStyle={textStyle} />
34      ))}
35    </View>
36  );
37}
38
39const styles = StyleSheet.create({
40  container: {
41    position: 'absolute',
42    top: -2,
43    left: 0,
44    flexDirection: 'row',
45  },
46  platform: {
47    borderRadius: 10,
48    paddingHorizontal: 3,
49    marginRight: 2,
50  },
51  platformAndroid: {
52    backgroundColor: '#79bf2d',
53  },
54  platformIos: {
55    backgroundColor: '#909090',
56  },
57  platformWeb: {
58    backgroundColor: '#4b4bff',
59  },
60  platformText: {
61    fontSize: 6,
62    color: 'white',
63  },
64});
65