finger

finger
git clone https://git.prime8.dev/finger.git
Log | Files | Refs | README | LICENSE

home.tsx (3456B)

      1 import { useState, useEffect } from "react";
      2 import { supabase } from "@/lib/supabase";
      3 import { Session } from "@supabase/supabase-js";
      4 import { Button, Text, YStack, XStack, Card, H1, H2, Separator } from "tamagui";
      5 import { router } from "expo-router";
      6 import { SafeAreaView } from "react-native-safe-area-context";
      7 
      8 export default function Home() {
      9   const [session, setSession] = useState<Session | null>(null);
     10 
     11   useEffect(() => {
     12     supabase.auth.onAuthStateChange((_event, session) => {
     13       setSession(session);
     14     });
     15   }, []);
     16 
     17   async function signOut() {
     18     const { error } = await supabase.auth.signOut();
     19     if (error) {
     20       console.error("Error signing out:", error.message);
     21     } else {
     22       router.replace("/");
     23     }
     24   }
     25 
     26   return (
     27     <SafeAreaView style={{ flex: 1 }}>
     28       <YStack
     29         flex={1}
     30         alignItems="center"
     31         justifyContent="center"
     32         padding={24}
     33         backgroundColor="$background"
     34         gap="$4"
     35       >
     36         <Card
     37           elevate
     38           size="$4"
     39           padded
     40           animation="bouncy"
     41           scale={0.9}
     42           hoverStyle={{ scale: 0.95 }}
     43           pressStyle={{ scale: 0.85 }}
     44           backgroundColor="$background"
     45           borderColor="$borderColor"
     46           borderWidth={1}
     47           borderRadius="$4"
     48           shadowColor="$shadowColor"
     49           shadowOffset={{ width: 0, height: 2 }}
     50           shadowOpacity={0.1}
     51           shadowRadius={8}
     52           elevation={4}
     53         >
     54           <YStack alignItems="center" gap="$4" padding="$4">
     55             <H1
     56               textAlign="center"
     57               color="$color"
     58               fontWeight="bold"
     59               fontSize="$8"
     60               letterSpacing="$1"
     61             >
     62               Welcome to Finger! 👋
     63             </H1>
     64 
     65             <Separator marginVertical="$2" />
     66 
     67             <YStack alignItems="center" gap="$2">
     68               <H2
     69                 color="$color"
     70                 fontSize="$4"
     71                 fontWeight="600"
     72                 textAlign="center"
     73               >
     74                 You&apos;re signed in as:
     75               </H2>
     76               <Text
     77                 color="$color"
     78                 fontSize="$3"
     79                 textAlign="center"
     80                 backgroundColor="$background"
     81                 paddingHorizontal="$3"
     82                 paddingVertical="$2"
     83                 borderRadius="$2"
     84                 borderWidth={1}
     85                 borderColor="$borderColor"
     86                 fontFamily="$mono"
     87               >
     88                 {session?.user?.email || "Loading..."}
     89               </Text>
     90             </YStack>
     91 
     92             <Separator marginVertical="$2" />
     93 
     94             <XStack gap="$3" justifyContent="center">
     95               <Button
     96                 onPress={signOut}
     97                 backgroundColor="$red9"
     98                 color="white"
     99                 fontWeight="600"
    100                 fontSize="$3"
    101                 paddingHorizontal="$4"
    102                 paddingVertical="$2"
    103                 borderRadius="$3"
    104                 borderWidth={0}
    105                 pressStyle={{
    106                   backgroundColor: "$red10",
    107                   scale: 0.95,
    108                 }}
    109                 hoverStyle={{
    110                   backgroundColor: "$red8",
    111                 }}
    112                 animation="bouncy"
    113               >
    114                 Sign Out
    115               </Button>
    116             </XStack>
    117           </YStack>
    118         </Card>
    119       </YStack>
    120     </SafeAreaView>
    121   );
    122 }