Affichage de la liste des défis

This commit is contained in:
2024-12-14 11:55:11 +01:00
parent 50382079c0
commit dba5b511ae
5 changed files with 168 additions and 12 deletions

View File

@ -1,29 +1,30 @@
import { Challenge } from "@/utils/features/challenges/challengesSlice"
import { FontAwesome6 } from "@expo/vector-icons"
import { View } from "react-native"
import { View, ViewStyle } from "react-native"
import { Button, Card, IconButton, MD3Colors, Surface, Text } from "react-native-paper"
export type ChallengeCardProps = {
challenge: Challenge,
challenge: Challenge | null,
onSuccess?: () => void,
onFail?: () => void,
onDelete?: () => void,
onEdit?: () => void,
style?: ViewStyle,
}
export default function ChallengeCard({ challenge, onSuccess, onFail, onDelete, onEdit }: ChallengeCardProps) {
export default function ChallengeCard({ challenge, onSuccess, onFail, onDelete, onEdit, style }: ChallengeCardProps) {
return (
<Surface elevation={2} style={{ flex: 1, margin: 20, borderRadius: 20 }}>
<Surface elevation={2} style={{ ...style, borderRadius: 20 }}>
<Card.Title
title={challenge.title}
title={challenge?.title}
titleStyle={{ textAlign: 'center' }}
titleVariant='headlineMedium'
right={(props) => onEdit ? <IconButton {...props} icon='file-document-edit-outline' onPress={() => onEdit()} /> : <></>} />
<View style={{ flexGrow: 1 }}>
<Surface elevation={5} mode='flat' style={{ flexGrow: 1, paddingHorizontal: 15, paddingVertical: 20 }}>
<Text variant='bodyLarge' style={{ flexGrow: 1 }}>{challenge.description}</Text>
<Text variant='bodyLarge' style={{ flexGrow: 1 }}>{challenge?.description}</Text>
<Text variant='titleMedium'>
Récompense : {challenge.reward} <FontAwesome6 name='coins' />
Récompense : {challenge?.reward} <FontAwesome6 name='coins' />
</Text>
</Surface>
</View>
@ -34,7 +35,7 @@ export default function ChallengeCard({ challenge, onSuccess, onFail, onDelete,
{onSuccess && <Button key='successBtn' mode='contained' icon='check' onPress={() => onSuccess()}>
Terminer
</Button>}
{onDelete && <Button key='deleteBtn' mode='contained' icon='delete' onPress={() => onDelete()} buttonColor={MD3Colors.error60}>
{onDelete && <Button key='deleteBtn' mode='contained' icon='delete' onPress={() => onDelete()} buttonColor={MD3Colors.error60} textColor={MD3Colors.secondary10}>
Supprimer
</Button>}
</View>