traintrape-moi/client/app/(tabs)/challenges.tsx

import PenaltyBanner from '@/components/PenalyBanner'
import { FontAwesome6 } from '@expo/vector-icons'
import { View } from 'react-native'
import { Appbar, Button, Surface, Text } from 'react-native-paper'

export default function ChallengesScreen() {
  return (
    <Surface style={{ flex: 1 }}>
      <Appbar.Header>
        <Appbar.Content title={"Défis"} />
        <Appbar.Action icon='format-list-bulleted' />
      </Appbar.Header>
      <PenaltyBanner />
      <Surface elevation={2} style={{ flex: 1, margin: 20, borderRadius: 20 }}>
        <View style={{ padding: 10 }}>
          <Text variant='headlineMedium' style={{ textAlign: 'center' }}>Titre</Text>
        </View>
        <View style={{ flexGrow: 1 }}>
          <Surface elevation={5} mode='flat' style={{ flexGrow: 1, padding: 15 }}>
            <Text variant='bodyLarge' style={{ flexGrow: 1 }}>Description</Text>
            <Text variant='titleMedium'>
              Récompense : 500 <FontAwesome6 name='coins' />
            </Text>
          </Surface>
        </View>
        <View style={{ flexWrap: 'wrap', flexDirection: 'row', justifyContent: 'space-around', padding: 15 }}>
          <Button mode='outlined' icon='cancel'>
            Passer
          </Button>
          <Button mode='contained' icon='check'>
            Terminer
          </Button>
        </View>
      </Surface>
    </Surface>
  )
}