first commit

src/app/(auth)/select-games.tsx

@@ -0,0 +1,116 @@
+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,
+  },
+});