mirror of
https://github.com/Memo-2023/mana-monorepo.git
synced 2026-05-15 19:19:41 +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>
112 lines
3 KiB
TypeScript
112 lines
3 KiB
TypeScript
import React from 'react';
|
|
import { Pressable, View, Text } from 'react-native';
|
|
import { useTheme } from '~/features/theme/ThemeProvider';
|
|
import Icon from '~/components/atoms/Icon';
|
|
import colors from '~/tailwind.config.js';
|
|
|
|
interface ClickableStatRowProps {
|
|
title: string;
|
|
value: string;
|
|
icon: string;
|
|
subtitle?: string;
|
|
onPress?: () => void;
|
|
isClickable?: boolean;
|
|
}
|
|
|
|
/**
|
|
* Clickable version of StatRow for interactive elements like memo links
|
|
*/
|
|
const ClickableStatRow: React.FC<ClickableStatRowProps> = ({
|
|
title,
|
|
value,
|
|
icon,
|
|
subtitle,
|
|
onPress,
|
|
isClickable = true,
|
|
}) => {
|
|
const { isDark, themeVariant } = useTheme();
|
|
|
|
const textColor = isDark ? '#FFFFFF' : '#000000';
|
|
const textSecondaryColor = isDark ? '#CCCCCC' : '#666666';
|
|
const primaryColor = isDark
|
|
? (colors as any).theme?.extend?.colors?.dark?.[themeVariant]?.primary
|
|
: (colors as any).theme?.extend?.colors?.[themeVariant]?.primary;
|
|
const borderColor = isDark ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)';
|
|
|
|
const contentBackgroundColor = isDark
|
|
? (colors as any).theme?.extend?.colors?.dark?.[themeVariant]?.contentBackgroundHover
|
|
: (colors as any).theme?.extend?.colors?.[themeVariant]?.contentBackgroundHover;
|
|
|
|
const content = (isPressed?: boolean) => (
|
|
<View
|
|
style={{
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
paddingVertical: 10,
|
|
paddingHorizontal: 12,
|
|
backgroundColor: isPressed
|
|
? (isDark ? 'rgba(255, 255, 255, 0.08)' : 'rgba(0, 0, 0, 0.05)')
|
|
: (isDark ? 'rgba(255, 255, 255, 0.03)' : 'rgba(0, 0, 0, 0.02)'),
|
|
borderRadius: 12,
|
|
}}>
|
|
<Icon name={icon} size={22} color={primaryColor} />
|
|
<View style={{ flex: 1, marginLeft: 14 }}>
|
|
<Text
|
|
style={{
|
|
fontSize: 14,
|
|
fontWeight: '500',
|
|
color: textColor,
|
|
}}>
|
|
{title}
|
|
</Text>
|
|
{subtitle && (
|
|
<Text
|
|
style={{
|
|
fontSize: 12,
|
|
color: textSecondaryColor,
|
|
marginTop: 2,
|
|
}}
|
|
numberOfLines={1}
|
|
ellipsizeMode="tail">
|
|
{subtitle}
|
|
</Text>
|
|
)}
|
|
</View>
|
|
<View
|
|
style={{
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
gap: 6,
|
|
}}>
|
|
<Text
|
|
style={{
|
|
fontSize: 17,
|
|
fontWeight: '700',
|
|
color: textColor,
|
|
textAlign: 'right',
|
|
}}>
|
|
{value}
|
|
</Text>
|
|
{isClickable && onPress && (
|
|
<Icon name="chevron-forward" size={18} color={textSecondaryColor} />
|
|
)}
|
|
</View>
|
|
</View>
|
|
);
|
|
|
|
if (isClickable && onPress) {
|
|
return (
|
|
<Pressable
|
|
onPress={onPress}
|
|
style={({ pressed }) => ({
|
|
opacity: pressed ? 0.7 : 1,
|
|
})}>
|
|
{({ pressed }) => content(pressed)}
|
|
</Pressable>
|
|
);
|
|
}
|
|
|
|
return content(false);
|
|
};
|
|
|
|
export default ClickableStatRow;
|