Some basic styling

src/components/Timelines/Timeline/Shared/Actioned.tsx

@@ -0,0 +1,111 @@
+import React from 'react'
+import { StyleSheet, Text, View } from 'react-native'
+import { Feather } from '@expo/vector-icons'
+
+import Emojis from './Emojis'
+import { useTheme } from 'src/utils/styles/ThemeManager'
+
+import constants from 'src/utils/styles/constants'
+
+export interface Props {
+  action: 'favourite' | 'follow' | 'mention' | 'poll' | 'reblog'
+  name?: string
+  emojis?: Mastodon.Emoji[]
+  notification?: boolean
+}
+
+const Actioned: React.FC<Props> = ({
+  action,
+  name,
+  emojis,
+  notification = false
+}) => {
+  const { theme } = useTheme()
+  const iconColor = theme.primary
+
+  let icon
+  let content
+  switch (action) {
+    case 'favourite':
+      icon = (
+        <Feather
+          name='heart'
+          size={constants.FONT_SIZE_S}
+          color={iconColor}
+          style={styles.icon}
+        />
+      )
+      content = `${name} 喜欢了你的嘟嘟`
+      break
+    case 'follow':
+      icon = (
+        <Feather
+          name='user-plus'
+          size={constants.FONT_SIZE_S}
+          color={iconColor}
+          style={styles.icon}
+        />
+      )
+      content = `${name} 开始关注你`
+      break
+    case 'poll':
+      icon = (
+        <Feather
+          name='bar-chart-2'
+          size={constants.FONT_SIZE_S}
+          color='black'
+          style={styles.icon}
+        />
+      )
+      content = `你参与的投票已结束`
+      break
+    case 'reblog':
+      icon = (
+        <Feather
+          name='repeat'
+          size={constants.FONT_SIZE_S}
+          color={iconColor}
+          style={styles.icon}
+        />
+      )
+      content = `${name} 转嘟了${notification ? '你的嘟嘟' : ''}`
+      break
+  }
+
+  return (
+    <View style={styles.actioned}>
+      {icon}
+      {content ? (
+        <View style={styles.content}>
+          {emojis ? (
+            <Emojis
+              content={content}
+              emojis={emojis}
+              size={constants.FONT_SIZE_S}
+            />
+          ) : (
+            <Text>{content}</Text>
+          )}
+        </View>
+      ) : (
+        <></>
+      )}
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  actioned: {
+    flexDirection: 'row',
+    marginBottom: constants.SPACING_S
+  },
+  icon: {
+    marginLeft: constants.AVATAR_S - constants.FONT_SIZE_S,
+    marginRight: constants.SPACING_S
+  },
+  content: {
+    flexDirection: 'row'
+  }
+})
+
+export default Actioned