Gestion dynamique de l'affichage du défi
This commit is contained in:
30
client/components/ChallengeCard.tsx
Normal file
30
client/components/ChallengeCard.tsx
Normal file
@ -0,0 +1,30 @@
|
||||
import { Challenge } from "@/utils/features/challenges/challengesSlice"
|
||||
import { FontAwesome6 } from "@expo/vector-icons"
|
||||
import { View } from "react-native"
|
||||
import { Button, Surface, Text } from "react-native-paper"
|
||||
|
||||
export default function ChallengeCard({ challenge }: { challenge: Challenge }) {
|
||||
return (
|
||||
<Surface elevation={2} style={{ flex: 1, margin: 20, borderRadius: 20 }}>
|
||||
<View style={{ padding: 10 }}>
|
||||
<Text variant='headlineMedium' style={{ textAlign: 'center' }}>{challenge.title}</Text>
|
||||
</View>
|
||||
<View style={{ flexGrow: 1 }}>
|
||||
<Surface elevation={5} mode='flat' style={{ flexGrow: 1, padding: 15 }}>
|
||||
<Text variant='bodyLarge' style={{ flexGrow: 1 }}>{challenge.description}</Text>
|
||||
<Text variant='titleMedium'>
|
||||
Récompense : {challenge.reward} <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>
|
||||
)
|
||||
}
|
Reference in New Issue
Block a user