117 lines
3.0 KiB
TypeScript
117 lines
3.0 KiB
TypeScript
import { useRouter } from 'expo-router';
|
|
import { useCallback, useState } from 'react';
|
|
import { ScrollView, StyleSheet, Text, View } from 'react-native';
|
|
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
|
|
|
import { BrandPressable } from '@/components/brand-pressable';
|
|
import { GameTile } from '@/components/game-tile';
|
|
import { Brand, BrandFont } from '@/constants/theme';
|
|
import { GAMES } from '@/data/games';
|
|
|
|
/**
|
|
* Frames `20-21` (initial, nothing selected) and `24-46` (2 games selected).
|
|
* The two Figma frames are the same screen with different local state, so we
|
|
* model them as a single screen with a `Set<string>` of selected ids.
|
|
*/
|
|
export default function SelectGamesScreen() {
|
|
const router = useRouter();
|
|
const insets = useSafeAreaInsets();
|
|
const [selected, setSelected] = useState<Set<string>>(new Set());
|
|
|
|
const toggle = useCallback((id: string) => {
|
|
setSelected((prev) => {
|
|
const next = new Set(prev);
|
|
if (next.has(id)) {
|
|
next.delete(id);
|
|
} else {
|
|
next.add(id);
|
|
}
|
|
return next;
|
|
});
|
|
}, []);
|
|
|
|
return (
|
|
<View style={[styles.root, { paddingTop: insets.top, paddingBottom: insets.bottom }]}>
|
|
<View style={styles.header}>
|
|
<Text style={styles.title}>Which games do you play?</Text>
|
|
<Text style={styles.subtitle}>
|
|
Pick the games you play the most to personalize your experience.
|
|
</Text>
|
|
</View>
|
|
|
|
<ScrollView
|
|
contentContainerStyle={styles.grid}
|
|
showsVerticalScrollIndicator={false}>
|
|
{GAMES.map((game) => (
|
|
<GameTile
|
|
key={game.id}
|
|
id={game.id}
|
|
name={game.name}
|
|
genre={game.genre}
|
|
gradient={game.gradient}
|
|
selected={selected.has(game.id)}
|
|
onPress={() => toggle(game.id)}
|
|
/>
|
|
))}
|
|
</ScrollView>
|
|
|
|
<View style={styles.footer}>
|
|
<BrandPressable
|
|
label={`Continue${selected.size > 0 ? ` (${selected.size})` : ''}`}
|
|
disabled={selected.size === 0}
|
|
onPress={() => router.push('/(auth)/search-games')}
|
|
/>
|
|
<Text
|
|
onPress={() => router.push('/(auth)/search-games')}
|
|
style={styles.link}>
|
|
Search for a game
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
root: {
|
|
flex: 1,
|
|
backgroundColor: Brand.bg,
|
|
paddingHorizontal: 24,
|
|
},
|
|
header: {
|
|
paddingTop: 16,
|
|
paddingBottom: 16,
|
|
gap: 6,
|
|
},
|
|
title: {
|
|
color: Brand.text,
|
|
fontSize: 22,
|
|
lineHeight: 28,
|
|
fontFamily: BrandFont.montserratBold,
|
|
},
|
|
subtitle: {
|
|
color: Brand.textMuted,
|
|
fontSize: 13,
|
|
lineHeight: 18,
|
|
fontFamily: BrandFont.poppinsRegular,
|
|
},
|
|
grid: {
|
|
flexDirection: 'row',
|
|
flexWrap: 'wrap',
|
|
justifyContent: 'space-between',
|
|
paddingVertical: 8,
|
|
rowGap: 16,
|
|
},
|
|
footer: {
|
|
paddingTop: 16,
|
|
gap: 8,
|
|
alignItems: 'center',
|
|
},
|
|
link: {
|
|
color: Brand.accent,
|
|
fontSize: 13,
|
|
lineHeight: 18,
|
|
fontFamily: BrandFont.poppinsMedium,
|
|
paddingVertical: 6,
|
|
},
|
|
});
|