1import React from 'react';
2import { View, Text, StyleSheet } 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 }: { platform: Platform }) {
14  return (
15    <View style={[styles.platform, styles[joinWithCamelCase(['platform', platform])]]}>
16      <Text style={styles.platformText}>{platform}</Text>
17    </View>
18  );
19}
20
21export default function Platforms({ platforms }: { platforms: Platform[] }) {
22  return (
23    <View style={styles.container}>
24      {platforms.map((platform) => (
25        <PlatformIndicator key={platform} platform={platform} />
26      ))}
27    </View>
28  );
29}
30
31const styles = StyleSheet.create({
32  container: {
33    position: 'absolute',
34    top: -2,
35    left: 0,
36    flexDirection: 'row',
37  },
38  platform: {
39    borderRadius: 10,
40    paddingHorizontal: 3,
41    marginRight: 2,
42  },
43  platformAndroid: {
44    backgroundColor: '#79bf2d',
45  },
46  platformIos: {
47    backgroundColor: '#909090',
48  },
49  platformWeb: {
50    backgroundColor: '#4b4bff',
51  },
52  platformText: {
53    fontSize: 6,
54    color: 'white',
55  },
56});
57