155 lines
3.7 KiB
TypeScript
155 lines
3.7 KiB
TypeScript
import MaterialIcons from '@expo/vector-icons/MaterialIcons';
|
|
import { router } from 'expo-router';
|
|
import React from 'react';
|
|
import { TouchableOpacity, View } from 'react-native';
|
|
|
|
import { ThemedText } from '@/components/themed-text';
|
|
import { Image } from 'expo-image';
|
|
|
|
type BillingMode = 'monthly' | 'lifetime';
|
|
|
|
const BILLING_OPTIONS: { key: BillingMode; label: string }[] = [
|
|
{ key: 'monthly', label: '月付' },
|
|
];
|
|
|
|
export function ProfileHeader({
|
|
billingMode,
|
|
onChangeBilling,
|
|
credits,
|
|
}: {
|
|
billingMode: BillingMode;
|
|
onChangeBilling: (mode: BillingMode) => void;
|
|
credits: number;
|
|
}) {
|
|
const palette = darkPalette;
|
|
|
|
return (
|
|
<View style={styles.headerRow}>
|
|
<View></View>
|
|
<BillingBadge
|
|
palette={palette}
|
|
billingMode={billingMode}
|
|
onChangeBilling={onChangeBilling}
|
|
credits={credits}
|
|
/>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
function BillingBadge({
|
|
palette,
|
|
billingMode,
|
|
onChangeBilling,
|
|
credits,
|
|
}: {
|
|
palette: any;
|
|
billingMode: BillingMode;
|
|
onChangeBilling: (mode: BillingMode) => void;
|
|
credits: number;
|
|
}) {
|
|
return (
|
|
<View style={[styles.billingShell, { backgroundColor: palette.pill, borderColor: palette.border }]}>
|
|
<View style={styles.billingOptions}>
|
|
{BILLING_OPTIONS.map(option => {
|
|
const isActive = option.key === billingMode;
|
|
return (
|
|
<TouchableOpacity
|
|
key={option.key}
|
|
onPress={() => router.push('/exchange')}
|
|
activeOpacity={0.85}
|
|
style={[
|
|
styles.billingOption,
|
|
{
|
|
backgroundColor: isActive ? palette.tabActive : 'transparent',
|
|
},
|
|
]}
|
|
>
|
|
<ThemedText
|
|
style={[
|
|
styles.billingLabel,
|
|
{
|
|
color: isActive ? palette.onAccent : palette.textSecondary,
|
|
},
|
|
]}
|
|
>
|
|
{option.label}
|
|
</ThemedText>
|
|
</TouchableOpacity>
|
|
);
|
|
})}
|
|
</View>
|
|
<TouchableOpacity
|
|
onPress={() => router.push('/exchange')}
|
|
activeOpacity={0.85}
|
|
style={[
|
|
styles.lightningShell
|
|
]}
|
|
>
|
|
<Image source={require('@/assets/images/credits.png')} style={{ width: 16, height: 16 }} />
|
|
<ThemedText style={[styles.lightningValue, { color: `#FED059` }]}>{credits}</ThemedText>
|
|
</TouchableOpacity>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const darkPalette = {
|
|
pill: '#16171C',
|
|
border: '#1D1E24',
|
|
tabActive: '#FFFFFF',
|
|
onAccent: '#050505',
|
|
textSecondary: '#8E9098',
|
|
textPrimary: '#F6F7FA',
|
|
accent: '#B7FF2F',
|
|
elevated: '#101014',
|
|
};
|
|
|
|
const styles = {
|
|
headerRow: {
|
|
flexDirection: 'row' as const,
|
|
alignItems: 'center' as const,
|
|
justifyContent: 'space-between' as const,
|
|
marginBottom: 14,
|
|
marginTop: 14
|
|
},
|
|
settingsButton: {
|
|
width: 44,
|
|
height: 44,
|
|
borderRadius: 22,
|
|
alignItems: 'center' as const,
|
|
justifyContent: 'center' as const,
|
|
},
|
|
billingShell: {
|
|
flexDirection: 'row' as const,
|
|
alignItems: 'center' as const,
|
|
padding: 4,
|
|
borderWidth: 1,
|
|
borderRadius: 999,
|
|
},
|
|
billingOptions: {
|
|
flexDirection: 'row' as const,
|
|
alignItems: 'center' as const,
|
|
},
|
|
billingOption: {
|
|
paddingHorizontal: 16,
|
|
paddingVertical: 6,
|
|
borderRadius: 999,
|
|
},
|
|
billingLabel: {
|
|
fontSize: 13,
|
|
fontWeight: '600' as const,
|
|
},
|
|
lightningShell: {
|
|
flexDirection: 'row' as const,
|
|
alignItems: 'center' as const,
|
|
borderRadius: 999,
|
|
paddingHorizontal: 12,
|
|
paddingVertical: 6,
|
|
marginLeft: 8,
|
|
},
|
|
lightningValue: {
|
|
fontSize: 13,
|
|
fontWeight: '600' as const,
|
|
marginLeft: 6,
|
|
},
|
|
};
|