Files
waseel/components/location-notice.tsx

59 lines
1.8 KiB
TypeScript

import { Linking, Text, TouchableOpacity, View } from "react-native";
import { tr } from "@/lib/i18n";
import type { LocationStatus } from "@/lib/use-user-location";
const COPY: Record<string, { titleKey: string; bodyKey: string; actionKey: string }> = {
denied: {
titleKey: "components.locationNotice.denied.title",
bodyKey: "components.locationNotice.denied.body",
actionKey: "components.locationNotice.denied.action",
},
"services-off": {
titleKey: "components.locationNotice.servicesOff.title",
bodyKey: "components.locationNotice.servicesOff.body",
actionKey: "components.locationNotice.servicesOff.action",
},
unavailable: {
titleKey: "components.locationNotice.unavailable.title",
bodyKey: "components.locationNotice.unavailable.body",
actionKey: "components.locationNotice.unavailable.action",
},
};
/** Fills the map slot when there's no position to draw. */
export const LocationNotice = ({
status,
onRetry,
}: {
status: LocationStatus;
onRetry: () => void;
}) => {
const copy = COPY[status];
if (!copy) return null;
return (
<View className="flex-1 items-center justify-center px-6">
<Text className="text-base font-JakartaBold text-black dark:text-white text-center">
{tr(copy.titleKey)}
</Text>
<Text className="text-sm font-Jakarta text-general-200 dark:text-neutral-400 text-center mt-2">
{tr(copy.bodyKey)}
</Text>
<TouchableOpacity
onPress={() =>
status === "denied" ? void Linking.openSettings() : onRetry()
}
activeOpacity={0.8}
className="mt-5 rounded-full bg-primary-500 px-6 py-3"
>
<Text className="text-white font-JakartaBold text-sm">
{tr(copy.actionKey)}
</Text>
</TouchableOpacity>
</View>
);
};