Implement scene invitation and membership controls

src/view/com/profile/ProfileCard.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import {StyleSheet, Text, View} from 'react-native'
+import {StyleSheet, Text, TouchableOpacity, View} from 'react-native'
 import {Link} from '../util/Link'
 import {UserAvatar} from '../util/UserAvatar'
 import {s, colors} from '../../lib/styles'
@@ -9,11 +9,15 @@ export function ProfileCard({
   handle,
   displayName,
   description,
+  renderButton,
+  onPressButton,
 }: {
   did: string
   handle: string
   displayName?: string
   description?: string
+  renderButton?: () => JSX.Element
+  onPressButton?: () => void
 }) {
   return (
     <Link style={styles.outer} href={`/profile/${handle}`} title={handle}>
@@ -22,9 +26,20 @@ export function ProfileCard({
           <UserAvatar size={40} displayName={displayName} handle={handle} />
         </View>
         <View style={styles.layoutContent}>
-          <Text style={[s.f16, s.bold]}>{displayName || handle}</Text>
-          <Text style={[s.f15, s.gray5]}>@{handle}</Text>
+          <Text style={[s.f16, s.bold]} numberOfLines={1}>
+            {displayName || handle}
+          </Text>
+          <Text style={[s.f15, s.gray5]} numberOfLines={1}>
+            @{handle}
+          </Text>
         </View>
+        {renderButton ? (
+          <View style={styles.layoutButton}>
+            <TouchableOpacity onPress={onPressButton} style={styles.btn}>
+              {renderButton()}
+            </TouchableOpacity>
+          </View>
+        ) : undefined}
       </View>
     </Link>
   )
@@ -34,9 +49,11 @@ const styles = StyleSheet.create({
   outer: {
     marginTop: 1,
     backgroundColor: colors.white,
+    borderRadius: 6,
   },
   layout: {
     flexDirection: 'row',
+    alignItems: 'center',
   },
   layoutAvi: {
     width: 60,
@@ -56,4 +73,17 @@ const styles = StyleSheet.create({
     paddingTop: 12,
     paddingBottom: 10,
   },
+  layoutButton: {
+    paddingRight: 10,
+  },
+  btn: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingVertical: 7,
+    paddingHorizontal: 14,
+    borderRadius: 50,
+    backgroundColor: colors.gray1,
+    marginLeft: 6,
+  },
 })