30 lines
1.2 KiB
TypeScript
30 lines
1.2 KiB
TypeScript
|
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>
|
||
|
|
)
|
||
|
|
}
|