Invite Team Member Account Form

import React, { useState } from 'react';
import {
  StyleSheet,
  SafeAreaView,
  View,
  TouchableOpacity,
  Text,
  ScrollView,
  TextInput,
} from 'react-native';
import FeatherIcon from 'react-native-vector-icons/Feather''@expo/vector-icons/Feather';
import Ionicons from 'react-native-vector-icons/Ionicons''@expo/vector-icons/Ionicons';

const suggestedContacts = [
  { id: '1', name: 'Sarah Wilson', email: '[email protected]' },
  { id: '2', name: 'Mike Chen', email: '[email protected]' },
  { id: '3', name: 'Alex Rodriguez', email: '[email protected]' },
  { id: '4', name: 'Emma Thompson', email: '[email protected]' },
  { id: '5', name: 'David Kim', email: '[email protected]' },
];

export default function Example() {
  const [form, setForm] = useState({
    email: '',
    role: 'member',
  });

  return (
    <SafeAreaView style={{ flex: 1, backgroundColor: '#F4EFF3' }}>
      <View style={styles.header}>
        <View style={styles.headerActions}>
          <TouchableOpacity
            onPress={() => {
              // handle onPress
            }}
            style={styles.headerAction}>
            <FeatherIcon
              color="#F82E08"
              name="arrow-left"
              size={24} />
          </TouchableOpacity>

          <TouchableOpacity
            onPress={() => {
              // handle onPress
            }}
            style={styles.headerSkip}>
            <Text style={styles.headerSkipText}>Skip</Text>
          </TouchableOpacity>
        </View>

        <Text style={styles.title}>Invite Team</Text>

        <Text style={styles.subtitle}>
          Add members to collaborate with your team
        </Text>
      </View>

      <ScrollView contentContainerStyle={styles.form}>
        <View style={styles.section}>
          <Text style={styles.sectionTitle}>Role</Text>

          <TouchableOpacity
            onPress={() => setForm({ ...form, role: 'member' })}
            style={[
              styles.roleOption,
              form.role === 'member'
                ? { borderColor: '#F82E08', backgroundColor: '#FFF5F5' }
                : {},
            ]}>
            <View style={styles.roleHeader}>
              <View style={styles.roleIcon}>
                <Ionicons color="#F82E08" name="person" size={20} />
              </View>

              <Text style={styles.roleLabel}>Team Member</Text>
            </View>

            <Text style={styles.roleDescription}>
              Can view and edit content
            </Text>
          </TouchableOpacity>

          <TouchableOpacity
            onPress={() => setForm({ ...form, role: 'admin' })}
            style={[
              styles.roleOption,
              form.role === 'admin'
                ? { borderColor: '#F82E08', backgroundColor: '#FFF5F5' }
                : {},
            ]}>
            <View style={styles.roleHeader}>
              <View style={styles.roleIcon}>
                <Ionicons color="#F82E08" name="shield" size={20} />
              </View>

              <Text style={styles.roleLabel}>Admin</Text>
            </View>

            <Text style={styles.roleDescription}>
              Full access to all features
            </Text>
          </TouchableOpacity>
        </View>

        <View style={styles.section}>
          <Text style={styles.sectionTitle}>Email Address</Text>

          <View style={styles.formInput}>
            <Ionicons color="#889797" name="mail" size={20} />

            <TextInput
              autoCapitalize="none"
              autoCorrect={false}
              clearButtonMode="never"
              keyboardType="email-address"
              onChangeText={email => setForm({ ...form, email })}
              placeholder="Enter email address"
              style={styles.formInputControl}
              value={form.email} />

            {!!form.email && (
              <FeatherIcon color="#F82E08" name="send" size={16} />
            )}
          </View>
        </View>

        <View style={styles.divider}>
          <View style={styles.dividerLine} />

          <Text style={styles.dividerText}>OR</Text>

          <View style={styles.dividerLine} />
        </View>

        <View style={styles.section}>
          <Text style={styles.sectionTitle}>Your Contacts</Text>

          {suggestedContacts.map(contact => (
            <TouchableOpacity
              key={contact.id}
              onPress={() => {
                // handle onPress
              }}
              style={styles.contactItem}>
              <View style={styles.contactAvatar}>
                <Text style={styles.contactAvatarInitials}>
                  {contact.name
                    .split(' ')
                    .map(n => n[0])
                    .join('')}
                </Text>
              </View>

              <View style={styles.contactDetails}>
                <Text style={styles.contactName}>{contact.name}</Text>

                <Text style={styles.contactEmail}>{contact.email}</Text>
              </View>
            </TouchableOpacity>
          ))}
        </View>
      </ScrollView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  title: {
    fontSize: 34,
    fontWeight: 'bold',
    color: '#181818',
    marginBottom: 12,
  },
  subtitle: {
    fontSize: 15,
    lineHeight: 20,
    fontWeight: '500',
    color: '#889797',
  },
  /** Header */
  header: {
    paddingHorizontal: 24,
    marginBottom: 16,
  },
  headerActions: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  headerAction: {
    width: 40,
    height: 40,
    borderRadius: 9999,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#ffdada',
    marginBottom: 16,
  },
  headerSkipText: {
    fontSize: 15,
    fontWeight: '500',
    color: '#f82e08',
    textDecorationLine: 'underline',
    textDecorationColor: '#f82e08',
    textDecorationStyle: 'solid',
  },
  /** Form */
  form: {
    paddingHorizontal: 24,
  },
  formInput: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: '#fff',
    borderRadius: 12,
    borderWidth: 2,
    borderColor: '#e5e7eb',
    paddingHorizontal: 12,
  },
  formInputControl: {
    flexGrow: 1,
    flexShrink: 1,
    flexBasis: 0,
    paddingRight: 16,
    paddingLeft: 0,
    marginLeft: 12,
    fontSize: 15,
    fontWeight: '500',
    color: '#222',
    paddingVertical: 12,
  },
  /** Section */
  section: {
    marginBottom: 12,
  },
  sectionTitle: {
    fontSize: 13,
    fontWeight: '600',
    color: '#889797',
    marginBottom: 6,
    textTransform: 'uppercase',
    letterSpacing: 0.19,
  },
  roleOption: {
    padding: 16,
    backgroundColor: '#fff',
    borderRadius: 12,
    borderWidth: 2,
    borderColor: '#e5e7eb',
    marginBottom: 12,
  },
  roleHeader: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 4,
  },
  roleIcon: {
    width: 32,
    height: 32,
    borderRadius: 16,
    backgroundColor: '#fff5f5',
    alignItems: 'center',
    justifyContent: 'center',
    marginRight: 12,
  },
  roleLabel: {
    fontSize: 15,
    lineHeight: 20,
    fontWeight: '600',
    color: '#1d2a32',
    letterSpacing: 0.19,
  },
  roleDescription: {
    fontSize: 13,
    lineHeight: 18,
    color: '#889797',
    marginLeft: 44,
  },
  /** Divider */
  divider: {
    flexDirection: 'row',
    alignItems: 'center',
    marginTop: 8,
    marginHorizontal: 0,
    marginBottom: 12,
  },
  dividerLine: {
    flexGrow: 1,
    flexShrink: 1,
    flexBasis: 0,
    height: 1,
    backgroundColor: '#e5e7eb',
  },
  dividerText: {
    fontSize: 13,
    lineHeight: 18,
    color: '#889797',
    marginVertical: 0,
    marginHorizontal: 12,
    letterSpacing: 0.19,
  },
  contactItem: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    padding: 12,
    backgroundColor: '#fff',
    borderRadius: 12,
    borderWidth: 2,
    borderColor: '#e5e7eb',
    marginBottom: 8,
  },
  contactAvatar: {
    width: 40,
    height: 40,
    marginRight: 12,
    borderRadius: 20,
    backgroundColor: '#f5f5f5',
    alignItems: 'center',
    justifyContent: 'center',
  },
  contactAvatarInitials: {
    fontSize: 15,
    fontWeight: '600',
    color: '#889797',
  },
  contactDetails: {
    flexGrow: 1,
    flexShrink: 1,
    flexBasis: 0,
  },
  contactName: {
    fontSize: 15,
    lineHeight: 20,
    fontWeight: '600',
    color: '#1d2a32',
    marginBottom: 2,
    letterSpacing: 0.19,
  },
  contactEmail: {
    fontSize: 13,
    lineHeight: 18,
    color: '#889797',
  },
});