ynerant/traintrape-moi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Interaction avec les boutons de fin de défi

Browse Source
This commit is contained in:
Emmy D'Anello
2024-12-12 23:41:20 +01:00
parent 47ec3da6df
commit 63ad84eb8c
3 changed files with 95 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
client/components/ChallengeCard.tsx
View File

@ -1,30 +1,43 @@
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"
import { Button, Card, IconButton, MD3Colors, Surface, Text } from "react-native-paper"
export default function ChallengeCard({ challenge }: { challenge: Challenge }) {
export type ChallengeCardProps = {
challenge: Challenge,
onSuccess?: () => void,
onFail?: () => void,
onDelete?: () => void,
onEdit?: () => void,
}
export default function ChallengeCard({ challenge, onSuccess, onFail, onDelete, onEdit }: ChallengeCardProps) {
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>
<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()}>
Passer
</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}>
Supprimer
</Button>}
</View>
</Surface>
)
}