54 lines
2.0 KiB
TypeScript
54 lines
2.0 KiB
TypeScript
import { authClient } from "@code/auth/native";
|
|
import { api } from "@code/backend/convex/_generated/api";
|
|
import { useQuery } from "convex/react";
|
|
import { Button, Spinner, Surface } from "heroui-native";
|
|
import { Text, View } from "react-native";
|
|
|
|
import { Container } from "@/components/container";
|
|
|
|
export default function Home() {
|
|
const healthCheck = useQuery(api.healthCheck.get);
|
|
const user = useQuery(api.auth.getCurrentUser);
|
|
|
|
return (
|
|
<Container className="px-4 pb-4">
|
|
<View className="mb-5 py-6">
|
|
<Text className="text-3xl font-semibold tracking-tight text-foreground">Zopu</Text>
|
|
<Text className="mt-1 text-sm text-muted">Your authenticated workspace</Text>
|
|
</View>
|
|
|
|
<Surface className="mb-4 rounded-xl p-4" variant="secondary">
|
|
{user === undefined ? (
|
|
<Spinner size="sm" />
|
|
) : (
|
|
<View className="flex-row items-center justify-between gap-4">
|
|
<View className="flex-1">
|
|
<Text className="font-medium text-foreground">{user?.name ?? "Signed in"}</Text>
|
|
<Text className="mt-0.5 text-xs text-muted">{user?.email}</Text>
|
|
</View>
|
|
<Button onPress={() => void authClient.signOut()} size="sm" variant="danger">
|
|
<Button.Label>Sign out</Button.Label>
|
|
</Button>
|
|
</View>
|
|
)}
|
|
</Surface>
|
|
|
|
<Surface className="rounded-xl p-4" variant="secondary">
|
|
<Text className="mb-2 font-medium text-foreground">API status</Text>
|
|
<View className="flex-row items-center gap-2">
|
|
<View
|
|
className={`h-2 w-2 rounded-full ${healthCheck === "OK" ? "bg-success" : "bg-danger"}`}
|
|
/>
|
|
<Text className="text-xs text-muted">
|
|
{healthCheck === undefined
|
|
? "Checking…"
|
|
: healthCheck === "OK"
|
|
? "Connected to Convex"
|
|
: "Convex unavailable"}
|
|
</Text>
|
|
</View>
|
|
</Surface>
|
|
</Container>
|
|
);
|
|
}
|