45 lines
No EOL
1.9 KiB
TypeScript
45 lines
No EOL
1.9 KiB
TypeScript
import React from 'react';
|
|
import { View } from 'react-native';
|
|
import { useRouter } from 'expo-router';
|
|
import MaterialIcons from '@expo/vector-icons/MaterialIcons';
|
|
import { trpc } from '@/src/trpc-client';
|
|
import { tw, MyText, MyTouchableOpacity } from 'common-ui';
|
|
|
|
export default function UserAddressHeader() {
|
|
const router = useRouter();
|
|
const { data: defaultAddressResponse } = trpc.user.address.getDefaultAddress.useQuery();
|
|
const defaultAddress = defaultAddressResponse?.data;
|
|
|
|
// Use a cleaner, white aesthetic that doesn't dominate the eye but feels premium
|
|
return (
|
|
<View style={[
|
|
tw`bg-white px-5 pt-3 pb-4 rounded-b-3xl z-50 border-b border-gray-50 shadow-sm`,
|
|
{ shadowColor: '#2E90FA', shadowOpacity: 0.08, shadowRadius: 10, shadowOffset: { width: 0, height: 4 } }
|
|
]}>
|
|
<View style={tw`flex-row items-center mt-1`}>
|
|
<MyTouchableOpacity
|
|
activeOpacity={0.7}
|
|
onPress={() => router.push('/(drawer)/(tabs)/me/addresses')}
|
|
style={tw`flex-1`}
|
|
>
|
|
<View style={tw`flex-row items-center mb-0.5`}>
|
|
{/* Small subtle brand indicator */}
|
|
<View style={tw`w-1.5 h-1.5 rounded-full bg-blue-500 mr-2`} />
|
|
|
|
<MyText style={tw`text-gray-500 text-[10px] font-bold uppercase tracking-widest`}>
|
|
Delivering to
|
|
</MyText>
|
|
<MyText style={tw`text-gray-800 text-xs font-bold uppercase tracking-wide ml-1`}>
|
|
{defaultAddress?.name ? defaultAddress.name.split(' ')[0] : 'Home'}
|
|
</MyText>
|
|
<MaterialIcons name="keyboard-arrow-down" size={14} color="#374151" style={tw`ml-0.5`} />
|
|
</View>
|
|
|
|
<MyText style={tw`text-gray-500 text-sm font-medium ml-3.5`} numberOfLines={1}>
|
|
{defaultAddress ? `${defaultAddress.addressLine1}, ${defaultAddress.city}` : 'Add a delivery address'}
|
|
</MyText>
|
|
</MyTouchableOpacity>
|
|
</View>
|
|
</View>
|
|
);
|
|
} |