Affichage de la liste des défis
This commit is contained in:
@ -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>
|
||||
|
Reference in New Issue
Block a user