44 lines
1.9 KiB
TypeScript
44 lines
1.9 KiB
TypeScript
import { Challenge } from "@/utils/features/challenges/challengesSlice"
|
|
import { FontAwesome6 } from "@expo/vector-icons"
|
|
import { View, ViewStyle } from "react-native"
|
|
import { Button, Card, IconButton, MD3Colors, Surface, Text } from "react-native-paper"
|
|
|
|
export type ChallengeCardProps = {
|
|
challenge: Challenge | null,
|
|
onSuccess?: () => void,
|
|
onFail?: () => void,
|
|
onDelete?: () => void,
|
|
onEdit?: () => void,
|
|
style?: ViewStyle,
|
|
}
|
|
|
|
export default function ChallengeCard({ challenge, onSuccess, onFail, onDelete, onEdit, style }: ChallengeCardProps) {
|
|
return (
|
|
<Surface elevation={2} style={{ ...style, borderRadius: 20 }}>
|
|
<Card.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='titleMedium'>
|
|
Récompense : {challenge?.reward} <FontAwesome6 name='coins' />
|
|
</Text>
|
|
</Surface>
|
|
</View>
|
|
<View style={{ flexWrap: 'wrap', flexDirection: 'row', justifyContent: 'space-around', padding: 15 }}>
|
|
{onFail && <Button key='failBtn' mode='outlined' icon='cancel' onPress={() => onFail()}>
|
|
Échouer
|
|
</Button>}
|
|
{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} textColor={MD3Colors.secondary10}>
|
|
Supprimer
|
|
</Button>}
|
|
</View>
|
|
</Surface>
|
|
)
|
|
} |