mirror of
https://github.com/hanzoai/calendar.git
synced 2026-09-24 22:42:24 +00:00
Dhairyashil ShindeandGitHub
fa53f54815
* feat(companion): add configurable landing page feature - Add useUserPreferences hook for persistent storage of landing page preference - Add LandingPagePicker component for both iOS and Android/web platforms - Update tabs index to redirect based on user preference - Update bookings index to accept initial filter from URL params - Add App Settings section in More screen with landing page selector - Clear user preferences on logout for fresh state * fix(companion): remove try-finally for React Compiler compatibility * fix(companion): use router.replace for dynamic landing page redirect Replace Redirect component with router.replace() to fix TypeScript strict typing issue with expo-router's Href type for dynamic routes. * fix(companion): use literal route strings for TypeScript strict typing Use switch statement with literal route strings instead of dynamic string variable to satisfy expo-router's strict Href type checking. * working fix * better css
87 lines
2.2 KiB
TypeScript
87 lines
2.2 KiB
TypeScript
import { Ionicons } from "@expo/vector-icons";
|
|
import { Text, TouchableOpacity, useColorScheme, View } from "react-native";
|
|
|
|
type IoniconName = keyof typeof Ionicons.glyphMap;
|
|
|
|
interface EmptyScreenProps {
|
|
icon: IoniconName;
|
|
headline: string;
|
|
description: string;
|
|
buttonText?: string;
|
|
onButtonPress?: () => void;
|
|
className?: string;
|
|
}
|
|
|
|
export function EmptyScreen({
|
|
icon,
|
|
headline,
|
|
description,
|
|
buttonText,
|
|
onButtonPress,
|
|
className,
|
|
}: EmptyScreenProps) {
|
|
const colorScheme = useColorScheme();
|
|
const isDark = colorScheme === "dark";
|
|
|
|
const colors = {
|
|
text: isDark ? "#FFFFFF" : "#111827",
|
|
textSecondary: isDark ? "#A3A3A3" : "#6B7280",
|
|
iconBackground: isDark ? "#2C2C2E" : "#F3F4F6",
|
|
icon: isDark ? "#E5E5EA" : "#374151",
|
|
buttonBg: isDark ? "#FFFFFF" : "#111827",
|
|
buttonText: isDark ? "#000000" : "#FFFFFF",
|
|
};
|
|
|
|
return (
|
|
<View
|
|
style={{
|
|
borderRadius: 8,
|
|
padding: 28,
|
|
width: "100%",
|
|
flexDirection: "column",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
}}
|
|
className={className}
|
|
>
|
|
<View
|
|
style={{
|
|
width: 72,
|
|
height: 72,
|
|
borderRadius: 36,
|
|
backgroundColor: colors.iconBackground,
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
}}
|
|
>
|
|
<Ionicons name={icon} size={40} color={colors.icon} />
|
|
</View>
|
|
|
|
<View className="mt-6 max-w-[420px] flex-col items-center">
|
|
<Text style={{ color: colors.text }} className="text-center text-2xl font-semibold">
|
|
{headline}
|
|
</Text>
|
|
|
|
<Text
|
|
style={{ color: colors.textSecondary }}
|
|
className="mb-8 mt-3 text-center text-sm font-normal leading-6"
|
|
>
|
|
{description}
|
|
</Text>
|
|
|
|
{buttonText && onButtonPress ? (
|
|
<TouchableOpacity
|
|
style={{ backgroundColor: colors.buttonBg }}
|
|
className="flex-row items-center justify-center gap-1 rounded-lg px-4 py-2.5"
|
|
onPress={onButtonPress}
|
|
>
|
|
<Text style={{ color: colors.buttonText }} className="text-base font-medium">
|
|
{buttonText}
|
|
</Text>
|
|
</TouchableOpacity>
|
|
) : null}
|
|
</View>
|
|
</View>
|
|
);
|
|
}
|