Feat/create guardian account

app/(tabs)/_layout.tsx

@@ -1,43 +1,48 @@
-import { Tabs } from 'expo-router';
-import React from 'react';
-import { Platform } from 'react-native';
+import { Tabs } from "expo-router";
+import React from "react";
+import { Platform } from "react-native";
 
-import { HapticTab } from '@/components/HapticTab';
-import { IconSymbol } from '@/components/ui/IconSymbol';
-import TabBarBackground from '@/components/ui/TabBarBackground';
-import { Colors } from '@/constants/Colors';
-import { useColorScheme } from '@/hooks/useColorScheme';
+import { HapticTab } from "@/components/HapticTab";
+import { IconSymbol } from "@/components/ui/IconSymbol";
+import TabBarBackground from "@/components/ui/TabBarBackground";
+import { Colors } from "@/constants/Colors";
+import { useColorScheme } from "@/hooks/useColorScheme";
 
 export default function TabLayout() {
   const colorScheme = useColorScheme();
 
   return (
     <Tabs
       screenOptions={{
-        tabBarActiveTintColor: Colors[colorScheme ?? 'light'].tint,
+        tabBarActiveTintColor: Colors[colorScheme ?? "light"].tint,
         headerShown: false,
         tabBarButton: HapticTab,
         tabBarBackground: TabBarBackground,
         tabBarStyle: Platform.select({
           ios: {
             // Use a transparent background on iOS to show the blur effect
-            position: 'absolute',
+            position: "absolute",
           },
           default: {},
         }),
-      }}>
+      }}
+    >
       <Tabs.Screen
         name="index"
         options={{
-          title: 'Home',
-          tabBarIcon: ({ color }) => <IconSymbol size={28} name="house.fill" color={color} />,
+          title: "Home",
+          tabBarIcon: ({ color }) => (
+            <IconSymbol size={28} name="house.fill" color={color} />
+          ),
         }}
       />
       <Tabs.Screen
         name="explore"
         options={{
-          title: 'Explore',
-          tabBarIcon: ({ color }) => <IconSymbol size={28} name="paperplane.fill" color={color} />,
+          title: "Explore",
+          tabBarIcon: ({ color }) => (
+            <IconSymbol size={28} name="paperplane.fill" color={color} />
+          ),
         }}
       />
     </Tabs>

app/_layout.tsx

@@ -4,7 +4,7 @@ import {
   ThemeProvider,
 } from "@react-navigation/native";
 import { useFonts } from "expo-font";
-import { Stack } from "expo-router";
+import { Slot } from "expo-router";
 import { StatusBar } from "expo-status-bar";
 import "react-native-reanimated";
 import "./globals.css";
@@ -26,10 +26,7 @@ export default function RootLayout() {
   return (
     <AuthProvider>
       <ThemeProvider value={colorScheme === "dark" ? DarkTheme : DefaultTheme}>
-        <Stack>
-          <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
-          <Stack.Screen name="+not-found" />
-        </Stack>
+        <Slot />
         <StatusBar style="auto" />
       </ThemeProvider>
     </AuthProvider>

app/register/_layout.tsx

@@ -0,0 +1,23 @@
+import { useColorScheme } from "@/hooks/useColorScheme";
+import {
+  DarkTheme,
+  DefaultTheme,
+  ThemeProvider,
+} from "@react-navigation/native";
+import { Stack } from "expo-router";
+import { RegisterProvider } from "../../contexts/RegisterContext";
+
+export default function RegisterLayout() {
+  const colorScheme = useColorScheme();
+  return (
+    <RegisterProvider>
+      <ThemeProvider value={colorScheme === "dark" ? DarkTheme : DefaultTheme}>
+        <Stack>
+          <Stack.Screen name="index" options={{ title: "Register" }} />
+          <Stack.Screen name="player-info" options={{ title: "Player Info" }} />
+          <Stack.Screen name="account" options={{ title: "Create Account" }} />
+        </Stack>
+      </ThemeProvider>
+    </RegisterProvider>
+  );
+}

app/register/account.tsx

@@ -0,0 +1,62 @@
+import { useState } from "react";
+import { Alert, Pressable, Text, TextInput, View } from "react-native";
+import { useRegister } from "../../contexts/RegisterContext";
+
+export default function AccountPage() {
+  const [email, setEmail] = useState("");
+  const [firstName, setFirstName] = useState("");
+  const [lastName, setLastName] = useState("");
+  const [password, setPassword] = useState("");
+  const { setAccountInfo, data } = useRegister();
+
+  const handleCreateAccount = () => {
+    setAccountInfo({ email, firstName, lastName, password });
+
+    console.log("🚀 Final Register Data:", {
+      ...data,
+      email,
+      firstName,
+      lastName,
+      password,
+    });
+
+    Alert.alert("Account Created", "You can now log in!");
+  };
+
+  return (
+    <View style={{ padding: 20 }}>
+      <View className="h-12" />
+      {/* Title and Step Indicator */}
+      <View className="mb-8">
+        {/* Step Numbers */}
+        <View className="flex-row justify-center items-center space-x-8">
+          <Text className="text-2xl text-gray-400  mr-8">1</Text>
+          <Text className="text-2xl text-gray-400  mr-8">2</Text>
+          <Text className="text-2xl font-bold text-black">3</Text>
+        </View>
+        <Text className="text-2xl font-bold text-gray-800 text-center mt-4">
+          Guardian information
+        </Text>
+      </View>
+      <TextInput placeholder="Email" onChangeText={setEmail} />
+      <TextInput placeholder="First Name" onChangeText={setFirstName} />
+      <TextInput placeholder="Last Name" onChangeText={setLastName} />
+      <TextInput
+        placeholder="Password"
+        secureTextEntry
+        onChangeText={setPassword}
+      />
+      {/* <Button title="Create Account" onPress={handleCreateAccount} /> */}
+      <View className="mt-4 space-y-4 items-center">
+        <Pressable
+          onPress={handleCreateAccount}
+          className="py-4 rounded-xl bg-blue-800 w-1/2 mb-4"
+        >
+          <Text className="text-center text-white font-semibold text-lg">
+            Create Account
+          </Text>
+        </Pressable>
+      </View>
+    </View>
+  );
+}

app/register/index.tsx

@@ -0,0 +1,99 @@
+import { useRouter } from "expo-router";
+import React, { useState } from "react";
+import { Pressable, Text, TouchableOpacity, View } from "react-native";
+import { useRegister } from "../../contexts/RegisterContext";
+
+export default function SelectUserType() {
+  const router = useRouter();
+  const { setUserType } = useRegister();
+  const [selectedType, setSelectedType] = useState("Guardian");
+
+  const handleNext = () => {
+    setUserType(selectedType);
+    router.push("/register/player-info");
+  };
+
+  const options: { label: string; value: string }[] = [
+    { label: "Guardian", value: "Guardian" },
+    { label: "Under 13", value: "Under-13" },
+    { label: "Over 13", value: "Over-13" },
+  ];
+
+  const handleBackToLogin = () => {
+    router.push("/");
+  };
+
+  return (
+    <View style={{ flex: 1, padding: 20 }}>
+      <View className="mb-6">
+        <TouchableOpacity
+          onPress={handleBackToLogin}
+          className="flex-row items-center self-start"
+        >
+          <Text className="text-lg text-blue-600 mr-2">←</Text>
+          <Text className="text-blue-600 font-medium">Back to Login</Text>
+        </TouchableOpacity>
+      </View>
+
+      {/* Title and Step Indicator */}
+      <View className="mb-8">
+        {/* Step Numbers */}
+        <View className="flex-row justify-center items-center space-x-8">
+          <Text className="text-2xl font-bold text-black mr-8">1</Text>
+          <Text className="text-2xl text-gray-400  mr-8">2</Text>
+          <Text className="text-2xl text-gray-400">3</Text>
+        </View>
+        <Text className="text-2xl font-bold text-gray-800 text-center mt-4">
+          Account type
+        </Text>
+      </View>
+
+      <View className="space-y-3">
+        {options.map((option) => (
+          <Pressable
+            key={option.value}
+            onPress={() => setSelectedType(option.value)}
+            className={`p-4 mt-2 rounded-xl 
+    ${selectedType === option.value ? "bg-yellow-400" : "bg-gray-200 "}`}
+          >
+            <Text
+              className={`text-center text-base font-medium ${
+                selectedType === option.value
+                  ? "text-black" // 黄底黑字更清晰
+                  : "text-black dark:text-white"
+              }`}
+            >
+              {option.label}
+            </Text>
+          </Pressable>
+        ))}
+      </View>
+
+      <View className="mt-4 items-center">
+        {/* <Button title="Next" onPress={handleNext} disabled={!selectedType} /> */}
+        <Pressable
+          onPress={handleNext}
+          disabled={!selectedType}
+          style={{
+            backgroundColor: selectedType ? "#93c5fd" : "#dbeafe",
+            borderRadius: 20,
+            paddingVertical: 16,
+            width: "50%",
+          }}
+        >
+          <Text
+            style={{
+              color: "white",
+              textAlign: "center",
+              fontWeight: "600",
+              fontSize: 18,
+              opacity: selectedType ? 1 : 0.5,
+            }}
+          >
+            Next
+          </Text>
+        </Pressable>
+      </View>
+    </View>
+  );
+}