@sendbird/uikit-react-native-foundation 2.0.1 → 2.0.2

package/src/ui/GroupChannelPreview/index.tsx

@@ -28,6 +28,7 @@ type Props = {
 
   frozen?: boolean;
   notificationOff?: boolean;
+  broadcast?: boolean;
 };
 
 const GroupChannelPreview = ({
@@ -43,6 +44,7 @@ const GroupChannelPreview = ({
   titleCaptionLeft,
   frozen,
   notificationOff,
+  broadcast,
 }: Props) => {
   const { colors } = useUIKitTheme();
   const color = colors.ui.groupChannelPreview;
@@ -65,6 +67,14 @@ const GroupChannelPreview = ({
       <View style={styles.rightSection}>
         <View style={styles.rightTopSection}>
           <View style={styles.channelInfoContainer}>
+            {broadcast && (
+              <Icon
+                size={16}
+                icon={'broadcast'}
+                color={colors.secondary}
+                containerStyle={styles.channelInfoBroadcast}
+              />
+            )}
             <Text numberOfLines={1} subtitle1 style={styles.channelInfoTitle} color={color.default.none.textTitle}>
               {title}
             </Text>
@@ -148,6 +158,9 @@ const styles = createStyleSheet({
     alignItems: 'center',
     flexDirection: 'row',
   },
+  channelInfoBroadcast: {
+    marginRight: 4,
+  },
   channelInfoTitle: {
     flexShrink: 1,
     marginRight: 4,

package/src/ui/OutlinedButton/index.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { Pressable, StyleProp, ViewStyle } from 'react-native';
+
+import Text from '../../components/Text';
+import createStyleSheet from '../../styles/createStyleSheet';
+import useUIKitTheme from '../../theme/useUIKitTheme';
+
+type OutlinedButtonProps = {
+  children: string;
+  containerStyle?: StyleProp<ViewStyle>;
+  onPress?: () => void;
+};
+
+const OutlinedButton = ({ children, onPress, containerStyle }: OutlinedButtonProps) => {
+  const { colors } = useUIKitTheme();
+  return (
+    <Pressable
+      onPress={onPress}
+      style={[styles.outlinedButton, { borderColor: colors.onBackground01 }, containerStyle]}
+    >
+      <Text button color={colors.onBackground01} numberOfLines={1} style={styles.outlinedButtonText}>
+        {children}
+      </Text>
+    </Pressable>
+  );
+};
+
+const styles = createStyleSheet({
+  outlinedButton: {
+    borderRadius: 4,
+    padding: 16,
+    borderWidth: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  outlinedButtonText: {
+    textAlign: 'center',
+    width: '100%',
+  },
+});
+
+export default OutlinedButton;

package/src/ui/ProfileCard/index.tsx

@@ -0,0 +1,73 @@
+import React from 'react';
+import { StyleProp, View, ViewStyle } from 'react-native';
+
+import Divider from '../../components/Divider';
+import Text from '../../components/Text';
+import createStyleSheet from '../../styles/createStyleSheet';
+import useUIKitTheme from '../../theme/useUIKitTheme';
+import Avatar from '../Avatar';
+
+type Props = {
+  uri: string;
+  username: string;
+
+  button?: JSX.Element;
+
+  bodyLabel: string;
+  body: string;
+
+  containerStyle?: StyleProp<ViewStyle>;
+};
+
+const ProfileCard = ({ uri, username, bodyLabel, body, button, containerStyle }: Props) => {
+  const { colors } = useUIKitTheme();
+  const color = colors.ui.profileCard.default.none;
+
+  return (
+    <View style={[styles.container, { backgroundColor: color.background }, containerStyle]}>
+      <View style={styles.profileContainer}>
+        <Avatar uri={uri} size={80} containerStyle={styles.profileAvatar} />
+        <Text h1 color={color.textUsername} numberOfLines={1}>
+          {username}
+        </Text>
+      </View>
+      {button && <View style={styles.messageButtonArea}>{button}</View>}
+      <Divider space={16} />
+      <View style={styles.profileInfoContainer}>
+        <Text body2 color={color.textBodyLabel} style={styles.profileInfoBodyLabel}>
+          {bodyLabel}
+        </Text>
+        <Text body3 numberOfLines={1} color={color.textBody}>
+          {body}
+        </Text>
+      </View>
+    </View>
+  );
+};
+
+const styles = createStyleSheet({
+  container: {
+    paddingTop: 32,
+    width: '100%',
+  },
+  profileContainer: {
+    alignItems: 'center',
+    paddingHorizontal: 16,
+    marginBottom: 24,
+  },
+  profileAvatar: {
+    marginBottom: 8,
+  },
+  profileInfoContainer: {
+    padding: 16,
+  },
+  profileInfoBodyLabel: {
+    marginBottom: 4,
+  },
+  messageButtonArea: {
+    marginHorizontal: 24,
+    marginBottom: 24,
+  },
+});
+
+export default ProfileCard;