77 lines
1.9 KiB
TypeScript
77 lines
1.9 KiB
TypeScript
import { TouchableOpacity, Text, ActivityIndicator, StyleSheet } from 'react-native'
|
||
|
||
interface AnmeldeButtonProps {
|
||
terminId: string
|
||
isAngemeldet: boolean
|
||
onToggle: () => void
|
||
isLoading: boolean
|
||
maxTeilnehmer?: number | null
|
||
teilnehmerAnzahl?: number
|
||
}
|
||
|
||
export function AnmeldeButton({ isAngemeldet, onToggle, isLoading, maxTeilnehmer, teilnehmerAnzahl = 0 }: AnmeldeButtonProps) {
|
||
const isFull = !isAngemeldet && !!maxTeilnehmer && teilnehmerAnzahl >= maxTeilnehmer
|
||
|
||
return (
|
||
<TouchableOpacity
|
||
onPress={onToggle}
|
||
disabled={isLoading || isFull}
|
||
style={[
|
||
styles.btn,
|
||
isAngemeldet ? styles.btnRegistered : isFull ? styles.btnFull : styles.btnRegister,
|
||
(isLoading || isFull) && styles.disabled,
|
||
]}
|
||
activeOpacity={0.82}
|
||
>
|
||
{isLoading ? (
|
||
<ActivityIndicator color={isAngemeldet ? '#52525B' : '#FFFFFF'} />
|
||
) : (
|
||
<Text style={[styles.label, (isAngemeldet || isFull) && styles.labelRegistered]}>
|
||
{isAngemeldet ? '✓ Angemeldet – Abmelden' : isFull ? 'Ausgebucht' : 'Jetzt anmelden'}
|
||
</Text>
|
||
)}
|
||
</TouchableOpacity>
|
||
)
|
||
}
|
||
|
||
const styles = StyleSheet.create({
|
||
btn: {
|
||
borderRadius: 14,
|
||
paddingVertical: 15,
|
||
flexDirection: 'row',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
},
|
||
btnRegister: {
|
||
backgroundColor: '#003B7E',
|
||
shadowColor: '#003B7E',
|
||
shadowOffset: { width: 0, height: 4 },
|
||
shadowOpacity: 0.24,
|
||
shadowRadius: 10,
|
||
elevation: 5,
|
||
},
|
||
btnRegistered: {
|
||
backgroundColor: '#F4F4F5',
|
||
borderWidth: 1,
|
||
borderColor: '#E2E8F0',
|
||
},
|
||
btnFull: {
|
||
backgroundColor: '#F4F4F5',
|
||
borderWidth: 1,
|
||
borderColor: '#E2E8F0',
|
||
},
|
||
disabled: {
|
||
opacity: 0.5,
|
||
},
|
||
label: {
|
||
fontSize: 15,
|
||
fontWeight: '600',
|
||
color: '#FFFFFF',
|
||
letterSpacing: 0.2,
|
||
},
|
||
labelRegistered: {
|
||
color: '#52525B',
|
||
},
|
||
})
|
||
|