kirukib
7310a349c5
Ship Expo Router screens, seeded stores, and polished UX so auth, shop, checkout, prescriptions, loyalty, family, and account processes work end-to-end offline. Co-authored-by: Cursor <cursoragent@cursor.com>
63 lines
1.5 KiB
TypeScript
63 lines
1.5 KiB
TypeScript
import type { ReactNode } from "react";
|
|
import { StyleSheet, Text, View, type StyleProp, type ViewStyle } from "react-native";
|
|
import { colors } from "@/lib/theme";
|
|
|
|
type Region = {
|
|
latitude: number;
|
|
longitude: number;
|
|
latitudeDelta: number;
|
|
longitudeDelta: number;
|
|
};
|
|
|
|
type MapProps = {
|
|
style?: StyleProp<ViewStyle>;
|
|
initialRegion?: Region;
|
|
children?: ReactNode;
|
|
};
|
|
|
|
export default function MapView({ style, children }: MapProps) {
|
|
return (
|
|
<View style={[styles.wrap, style]}>
|
|
<Text style={styles.title}>Map preview</Text>
|
|
<Text style={styles.sub}>Live maps are available on iOS and Android.</Text>
|
|
{children}
|
|
</View>
|
|
);
|
|
}
|
|
|
|
type MarkerProps = {
|
|
coordinate: { latitude: number; longitude: number };
|
|
title?: string;
|
|
description?: string;
|
|
pinColor?: string;
|
|
};
|
|
|
|
export function Marker({ title, description }: MarkerProps) {
|
|
return (
|
|
<View style={styles.marker}>
|
|
<Text style={styles.markerTitle}>{title ?? "Pin"}</Text>
|
|
{description ? <Text style={styles.sub}>{description}</Text> : null}
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
wrap: {
|
|
backgroundColor: "#E8EDF2",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
gap: 8,
|
|
padding: 24,
|
|
},
|
|
title: { fontSize: 16, fontWeight: "800", color: colors.ink },
|
|
sub: { fontSize: 13, color: colors.muted, textAlign: "center" },
|
|
marker: {
|
|
marginTop: 12,
|
|
paddingHorizontal: 12,
|
|
paddingVertical: 8,
|
|
backgroundColor: "#fff",
|
|
borderRadius: 8,
|
|
},
|
|
markerTitle: { fontWeight: "700", color: colors.ink },
|
|
});
|