mirror of
https://github.com/Memo-2023/mana-monorepo.git
synced 2026-05-18 01:09:40 +02:00
e7f5f942f3
Projects included: - maerchenzauber (NestJS backend + Expo mobile + SvelteKit web + Astro landing) - manacore (Expo mobile + SvelteKit web + Astro landing) - manadeck (NestJS backend + Expo mobile + SvelteKit web) - memoro (Expo mobile + SvelteKit web + Astro landing) This commit preserves the current state before monorepo restructuring. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
105 lines
3.3 KiB
TypeScript
105 lines
3.3 KiB
TypeScript
import React from 'react';
|
|
import { View, Text, Pressable } from 'react-native';
|
|
import { useTheme } from '../theme/ThemeProvider';
|
|
import { useTranslation } from 'react-i18next';
|
|
import colors from '~/tailwind.config.js';
|
|
|
|
export type BillingCycle = 'monthly' | 'yearly';
|
|
|
|
interface BillingToggleProps {
|
|
billingCycle: BillingCycle;
|
|
onChange: (cycle: BillingCycle) => void;
|
|
yearlyDiscount?: string;
|
|
}
|
|
|
|
export const BillingToggle: React.FC<BillingToggleProps> = ({
|
|
billingCycle,
|
|
onChange,
|
|
yearlyDiscount = '33%'
|
|
}) => {
|
|
const { isDark, themeVariant, tw } = useTheme();
|
|
const { t } = useTranslation();
|
|
|
|
// Theme-aware colors using the same system as MemoPreview and SettingsToggle
|
|
const themeColors = (colors as any).theme?.extend?.colors;
|
|
const textColor = isDark ? '#FFFFFF' : '#000000';
|
|
const secondaryTextColor = isDark ? 'rgba(255,255,255,0.7)' : 'rgba(0,0,0,0.7)';
|
|
const bgColor = isDark
|
|
? themeColors?.dark?.[themeVariant]?.contentBackground || '#1E1E1E'
|
|
: themeColors?.[themeVariant]?.contentBackground || '#FFFFFF';
|
|
const borderColor = isDark
|
|
? themeColors?.dark?.[themeVariant]?.border || '#424242'
|
|
: themeColors?.[themeVariant]?.border || '#e6e6e6';
|
|
const accentColor = '#4287f5'; // Konsistente Mana-Farbe
|
|
const selectedBgColor = isDark ? 'rgba(255,255,255,0.1)' : 'rgba(0,0,0,0.06)';
|
|
|
|
return (
|
|
<View style={{
|
|
flexDirection: 'row',
|
|
backgroundColor: bgColor,
|
|
borderRadius: 8,
|
|
marginBottom: 8, // Reduced from 24 to 8
|
|
padding: 4,
|
|
maxWidth: 480,
|
|
marginHorizontal: 'auto'
|
|
}}>
|
|
<Pressable
|
|
style={{
|
|
flex: 1,
|
|
paddingVertical: 12,
|
|
alignItems: 'center',
|
|
borderRadius: 6,
|
|
flexDirection: 'row',
|
|
justifyContent: 'center',
|
|
backgroundColor: billingCycle === 'monthly' ? selectedBgColor : 'transparent'
|
|
}}
|
|
onPress={() => onChange('monthly')}
|
|
>
|
|
<Text
|
|
style={{
|
|
color: billingCycle === 'monthly' ? accentColor : textColor,
|
|
fontSize: 14,
|
|
fontWeight: billingCycle === 'monthly' ? 'bold' : 'normal' as const
|
|
}}
|
|
>
|
|
{t('subscription.monthly')}
|
|
</Text>
|
|
</Pressable>
|
|
<Pressable
|
|
style={{
|
|
flex: 1,
|
|
paddingVertical: 12,
|
|
alignItems: 'center',
|
|
borderRadius: 6,
|
|
flexDirection: 'row',
|
|
justifyContent: 'center',
|
|
backgroundColor: billingCycle === 'yearly' ? selectedBgColor : 'transparent'
|
|
}}
|
|
onPress={() => onChange('yearly')}
|
|
>
|
|
<Text
|
|
style={{
|
|
color: billingCycle === 'yearly' ? accentColor : textColor,
|
|
fontSize: 14,
|
|
fontWeight: billingCycle === 'yearly' ? 'bold' : 'normal' as const
|
|
}}
|
|
>
|
|
{t('subscription.yearly')}
|
|
</Text>
|
|
{yearlyDiscount && (
|
|
<View style={{
|
|
backgroundColor: accentColor,
|
|
borderRadius: 12,
|
|
paddingHorizontal: 8,
|
|
paddingVertical: 2,
|
|
marginLeft: 8
|
|
}}>
|
|
<Text style={{ color: '#000000', fontSize: 10, fontWeight: 'bold' as const }}>{t('subscription.yearly_discount', { percentage: yearlyDiscount })}</Text>
|
|
</View>
|
|
)}
|
|
</Pressable>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
export default BillingToggle;
|