Function Header

app/src/components/Header.tsx:9–33

()

import { FontAwesome5 as FontAwesome } from '@expo/vector-icons'
import { Theme } from '../../types'

export function Header() {
  const { theme } = useContext(ThemeContext)
  const {
    handlePresentModalPress,
    chatType
  } = useContext(AppContext)
  const styles = getStyles(theme)
  const ModelIcon = chatType.icon

  return (
    <View style={styles.container}>
      <Icon size={34} fill={theme.textColor} />
      <TouchableOpacity
        style={styles.modelPill}
        onPress={handlePresentModalPress}
        accessibilityRole="button"
        accessibilityLabel={`Current model: ${chatType.name}. Tap to change model.`}
      >
        <ModelIcon size={14} theme={theme} />
        <Text style={styles.modelPillText} numberOfLines={1}>
          {chatType.name}
        </Text>
      </TouchableOpacity>
      <TouchableHighlight
        style={styles.buttonContainer}
        underlayColor={'transparent'}
        activeOpacity={0.6}