mirror of
https://github.com/Memo-2023/mana-monorepo.git
synced 2026-05-17 23:49:40 +02:00
61d181fbc2
Move inactive projects out of active workspace: - bauntown (community website) - maerchenzauber (AI story generation) - memoro (voice memo app) - news (news aggregation) - nutriphi (nutrition tracking) - reader (reading app) - uload (URL shortener) - wisekeep (AI wisdom extraction) Update CLAUDE.md documentation: - Add presi to active projects - Document archived projects section - Update workspace configuration Archived apps can be re-activated by moving back to apps/ 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
74 lines
2.3 KiB
TypeScript
74 lines
2.3 KiB
TypeScript
import React from 'react';
|
|
import { View, Text } from 'react-native';
|
|
import { Ionicons } from '@expo/vector-icons';
|
|
import { useTheme } from '../theme/ThemeProvider';
|
|
import { useTranslation } from 'react-i18next';
|
|
import colors from '~/tailwind.config.js';
|
|
|
|
export interface CostItem {
|
|
action: string;
|
|
actionKey?: string; // Translation key for the action
|
|
cost: number;
|
|
icon: keyof typeof Ionicons.glyphMap;
|
|
}
|
|
|
|
interface CostCardProps {
|
|
title: string;
|
|
costs: CostItem[];
|
|
}
|
|
|
|
export const CostCard: React.FC<CostCardProps> = ({ title, costs }) => {
|
|
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
|
|
|
|
return (
|
|
<View
|
|
style={{
|
|
backgroundColor: bgColor,
|
|
borderRadius: 12,
|
|
padding: 16,
|
|
borderWidth: 1,
|
|
borderColor: borderColor,
|
|
}}
|
|
>
|
|
<Text
|
|
style={{ color: textColor, fontSize: 20, fontWeight: 'bold' as const, marginBottom: 16 }}
|
|
>
|
|
{title}
|
|
</Text>
|
|
|
|
<View style={{ gap: 12 }}>
|
|
{costs.map((item, index) => (
|
|
<View
|
|
key={index}
|
|
style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}
|
|
>
|
|
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
|
|
<Ionicons name={item.icon} size={18} color={accentColor} />
|
|
<Text style={{ color: secondaryTextColor, fontSize: 14, marginLeft: 8 }}>
|
|
{item.actionKey ? t(item.actionKey, item.action) : item.action}
|
|
</Text>
|
|
</View>
|
|
<Text style={{ color: textColor, fontSize: 16, fontWeight: '600' as const }}>
|
|
{t('subscription.mana_amount', '{{amount}} Mana', { amount: item.cost })}
|
|
</Text>
|
|
</View>
|
|
))}
|
|
</View>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
export default CostCard;
|