1 files changed, 55 insertions, 0 deletions
diff --git a/src/view/com/util/moderation/ProfileHeaderLabels.tsx b/src/view/com/util/moderation/ProfileHeaderLabels.tsx
new file mode 100644
index 000000000..e099f09a7
--- /dev/null
+++ b/src/view/com/util/moderation/ProfileHeaderLabels.tsx
@@ -0,0 +1,55 @@
+import React from 'react'
+import {StyleSheet, View} from 'react-native'
+import {ComAtprotoLabelDefs} from '@atproto/api'
+import {
+  FontAwesomeIcon,
+  FontAwesomeIconStyle,
+} from '@fortawesome/react-native-fontawesome'
+import {Text} from '../text/Text'
+import {usePalette} from 'lib/hooks/usePalette'
+import {getLabelValueGroup} from 'lib/labeling/helpers'
+
+export function ProfileHeaderLabels({
+  labels,
+}: {
+  labels: ComAtprotoLabelDefs.Label[] | undefined
+}) {
+  const palErr = usePalette('error')
+  if (!labels?.length) {
+    return null
+  }
+  return (
+    <>
+      {labels.map((label, i) => {
+        const labelGroup = getLabelValueGroup(label?.val || '')
+        return (
+          <View
+            key={`${label.val}-${i}`}
+            style={[styles.container, palErr.border, palErr.view]}>
+            <FontAwesomeIcon
+              icon="circle-exclamation"
+              style={palErr.text as FontAwesomeIconStyle}
+              size={20}
+            />
+            <Text style={palErr.text}>
+              This account has been flagged for{' '}
+              {labelGroup.title.toLocaleLowerCase()}.
+            </Text>
+          </View>
+        )
+      })}
+    </>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 10,
+    borderWidth: 1,
+    borderRadius: 6,
+    paddingHorizontal: 10,
+    paddingVertical: 8,
+  },
+})