Untitled

// File: CreateAccountScreen.js
import React, { useState } from 'react';
import { View, Text, TextInput, TouchableOpacity, StyleSheet } from 'react-native';
import { FontAwesome } from '@expo/vector-icons'; // You can install expo/vector-icons or any other icon package

export default function CreateAccountScreen() {
  const [selectedRole, setSelectedRole] = useState('Student');

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Create Account</Text>

      <View style={styles.tabContainer}>
        <TouchableOpacity 
          style={[styles.tab, selectedRole === 'Student' && styles.activeTab]} 
          onPress={() => setSelectedRole('Student')}
        >
          <FontAwesome name="graduation-cap" size={24} color={selectedRole === 'Student' ? 'blue' : 'black'} />
          <Text style={[styles.tabText, selectedRole === 'Student' && styles.activeTabText]}>Student</Text>
        </TouchableOpacity>
        
        <TouchableOpacity 
          style={[styles.tab, selectedRole === 'Teacher' && styles.activeTab]} 
          onPress={() => setSelectedRole('Teacher')}
        >
          <FontAwesome name="user" size={24} color={selectedRole === 'Teacher' ? 'blue' : 'black'} />
          <Text style={[styles.tabText, selectedRole === 'Teacher' && styles.activeTabText]}>Teachers</Text>
        </TouchableOpacity>
      </View>

      <TextInput style={styles.input} placeholder="First Name" />
      <TextInput style={styles.input} placeholder="Last Name" />
      <TextInput style={styles.input} placeholder="Middle Initial" />
      <TextInput style={styles.input} placeholder="Grade level" />
      <TextInput style={styles.input} placeholder="Section" />
      <TextInput style={styles.input} placeholder="Password" secureTextEntry />

      <TouchableOpacity style={styles.button}>
        <Text style={styles.buttonText}>Create Account</Text>
      </TouchableOpacity>

      <TouchableOpacity style={styles.cancelButton}>
        <Text style={styles.cancelText}>Cancel</Text>
      </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5F5F5',
    padding: 20,
    justifyContent: 'center',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 20,
    textAlign: 'center',
  },
  tabContainer: {
    flexDirection: 'row',
    justifyContent: 'center',
    marginBottom: 20,
  },
  tab: {
    flex: 1,
    padding: 10,
    alignItems: 'center',
    borderBottomWidth: 2,
    borderBottomColor: 'transparent',
  },
  activeTab: {
    backgroundColor: '#E0F7FA',
    borderBottomColor: 'blue',
  },
  tabText: {
    fontSize: 16,
    marginTop: 5,
    color: 'black',
  },
  activeTabText: {
    color: 'blue',
  },
  input: {
    height: 50,
    borderColor: '#CCCCCC',
    borderWidth: 1,
    borderRadius: 10,
    paddingHorizontal: 10,
    backgroundColor: '#FFFFFF',
    marginBottom: 15,
  },
  button: {
    backgroundColor: 'blue',
    padding: 15,
    borderRadius: 10,
    alignItems: 'center',
    marginBottom: 10,
  },
  buttonText: {
    color: 'white',
    fontSize: 16,
  },
  cancelButton: {
    alignItems: 'center',
    padding: 15,
  },
  cancelText: {
    color: 'gray',
    fontSize: 16,
  },
});