39 lines
2.0 KiB
TypeScript
39 lines
2.0 KiB
TypeScript
// Bottom-Sheet mit 4 Mini-Spielen zur Ablenkung im SOS-Flow.
|
|
import { useEffect, useRef } from 'react';
|
|
import { View, Text, Pressable, Animated, StyleSheet } from 'react-native';
|
|
import { type GameType, GamePickerGrid } from './UrgeGames';
|
|
|
|
type Props = { onSelect: (game: GameType) => void; onClose: () => void };
|
|
|
|
export default function GamePickerDrawer({ onSelect, onClose }: Props) {
|
|
const slideAnim = useRef(new Animated.Value(500)).current;
|
|
useEffect(() => {
|
|
Animated.spring(slideAnim, { toValue: 0, useNativeDriver: true, damping: 22, mass: 1, stiffness: 200 }).start();
|
|
}, []);
|
|
return (
|
|
<>
|
|
<Pressable style={st.backdrop} onPress={onClose} />
|
|
<Animated.View style={[st.drawerContainer, { transform: [{ translateY: slideAnim }] }]}>
|
|
<View style={st.drawerHandle} />
|
|
<View style={{ paddingHorizontal: 20, paddingTop: 12, paddingBottom: 8 }}>
|
|
<Text style={{ fontFamily: 'Nunito_800ExtraBold', fontSize: 20, color: '#111827', textAlign: 'center' }}>
|
|
Wähl ein Spiel
|
|
</Text>
|
|
<Text style={{ fontFamily: 'Nunito_400Regular', fontSize: 13, color: '#6b7280', textAlign: 'center', marginTop: 4 }}>
|
|
Lenk deinen Kopf ab — nur ein paar Minuten
|
|
</Text>
|
|
</View>
|
|
<View style={{ paddingHorizontal: 16, paddingTop: 8 }}>
|
|
<GamePickerGrid onSelect={onSelect} />
|
|
</View>
|
|
</Animated.View>
|
|
</>
|
|
);
|
|
}
|
|
|
|
const st = StyleSheet.create({
|
|
backdrop: { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, backgroundColor: 'rgba(0,0,0,0.28)', zIndex: 20 },
|
|
drawerContainer: { position: 'absolute', bottom: 0, left: 0, right: 0, zIndex: 21, backgroundColor: '#ffffff', borderTopLeftRadius: 28, borderTopRightRadius: 28, paddingBottom: 36, shadowColor: '#000', shadowOffset: { width: 0, height: -4 }, shadowOpacity: 0.18, shadowRadius: 20, elevation: 24 },
|
|
drawerHandle: { width: 40, height: 4, borderRadius: 2, backgroundColor: '#d1d5db', alignSelf: 'center', marginTop: 14, marginBottom: 4 },
|
|
});
|