115 lines
3.3 KiB
TypeScript
115 lines
3.3 KiB
TypeScript
import { useState } from "react";
|
|
import { Image, Pressable, Text, View, Platform } from "react-native";
|
|
import { useRouter } from "expo-router";
|
|
import { StyleSheet, useUnistyles } from "react-native-unistyles";
|
|
import { QrCode, Link2 } from "lucide-react-native";
|
|
import type { HostProfile } from "@/contexts/daemon-registry-context";
|
|
import { AddHostModal } from "./add-host-modal";
|
|
|
|
const styles = StyleSheet.create((theme) => ({
|
|
container: {
|
|
flex: 1,
|
|
backgroundColor: theme.colors.surface0,
|
|
padding: theme.spacing[8],
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
},
|
|
logo: {
|
|
width: 96,
|
|
height: 96,
|
|
marginBottom: theme.spacing[6],
|
|
},
|
|
title: {
|
|
color: theme.colors.foreground,
|
|
fontSize: theme.fontSize.xl,
|
|
fontWeight: theme.fontWeight.bold,
|
|
marginBottom: theme.spacing[3],
|
|
textAlign: "center",
|
|
},
|
|
subtitle: {
|
|
color: theme.colors.foregroundMuted,
|
|
fontSize: theme.fontSize.base,
|
|
textAlign: "center",
|
|
marginBottom: theme.spacing[8],
|
|
},
|
|
actions: {
|
|
width: "100%",
|
|
maxWidth: 420,
|
|
gap: theme.spacing[3],
|
|
},
|
|
actionButton: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
gap: theme.spacing[3],
|
|
paddingVertical: theme.spacing[4],
|
|
borderRadius: theme.borderRadius.xl,
|
|
backgroundColor: theme.colors.surface2,
|
|
borderWidth: 1,
|
|
borderColor: theme.colors.border,
|
|
},
|
|
actionButtonPrimary: {
|
|
backgroundColor: theme.colors.palette.blue[500],
|
|
borderColor: theme.colors.palette.blue[500],
|
|
},
|
|
actionText: {
|
|
color: theme.colors.foreground,
|
|
fontSize: theme.fontSize.base,
|
|
fontWeight: theme.fontWeight.semibold,
|
|
},
|
|
actionTextPrimary: {
|
|
color: theme.colors.palette.white,
|
|
},
|
|
}));
|
|
|
|
export interface WelcomeScreenProps {
|
|
onHostAdded?: (profile: HostProfile) => void;
|
|
}
|
|
|
|
export function WelcomeScreen({ onHostAdded }: WelcomeScreenProps) {
|
|
const { theme } = useUnistyles();
|
|
const router = useRouter();
|
|
const [isDirectOpen, setIsDirectOpen] = useState(false);
|
|
|
|
return (
|
|
<View style={styles.container} testID="welcome-screen">
|
|
<Image
|
|
source={require("../../assets/images/icon.png")}
|
|
style={styles.logo}
|
|
resizeMode="contain"
|
|
/>
|
|
<Text style={styles.title}>Welcome to Paseo</Text>
|
|
<Text style={styles.subtitle}>Add a host to start.</Text>
|
|
|
|
<View style={styles.actions}>
|
|
<Pressable
|
|
style={[styles.actionButton, styles.actionButtonPrimary]}
|
|
onPress={() => setIsDirectOpen(true)}
|
|
>
|
|
<Link2 size={18} color={theme.colors.palette.white} />
|
|
<Text style={[styles.actionText, styles.actionTextPrimary]}>Direct connection</Text>
|
|
</Pressable>
|
|
|
|
{Platform.OS !== "web" ? (
|
|
<Pressable
|
|
style={styles.actionButton}
|
|
onPress={() => router.push("/pair-scan")}
|
|
>
|
|
<QrCode size={18} color={theme.colors.foreground} />
|
|
<Text style={styles.actionText}>Scan QR code</Text>
|
|
</Pressable>
|
|
) : null}
|
|
</View>
|
|
|
|
<AddHostModal
|
|
visible={isDirectOpen}
|
|
onClose={() => setIsDirectOpen(false)}
|
|
onSaved={(profile) => {
|
|
onHostAdded?.(profile);
|
|
router.replace({ pathname: "/", params: { serverId: profile.id } });
|
|
}}
|
|
/>
|
|
</View>
|
|
);
|
|
}
|