88 lines
2.1 KiB
TypeScript
88 lines
2.1 KiB
TypeScript
import React, { memo } from 'react';
|
|
import { Pressable, StyleSheet, Text, View } from 'react-native';
|
|
import Ionicons from '@react-native-vector-icons/ionicons';
|
|
import { useTheme, fontFamily } from '../../../theme';
|
|
|
|
interface ServiceGridItemProps {
|
|
id: string;
|
|
title: string;
|
|
icon: string;
|
|
iconColor?: string;
|
|
onPress?: () => void;
|
|
fullWidth?: boolean;
|
|
}
|
|
|
|
const ServiceGridItemComponent = ({
|
|
title,
|
|
icon,
|
|
iconColor,
|
|
onPress,
|
|
fullWidth = false,
|
|
}: ServiceGridItemProps) => {
|
|
const theme = useTheme();
|
|
|
|
return (
|
|
<Pressable
|
|
onPress={onPress}
|
|
style={({ pressed }) => [
|
|
styles.container,
|
|
{
|
|
backgroundColor: theme.colors.surface,
|
|
borderColor: theme.colors.cardBorder,
|
|
borderRadius: 20,
|
|
width: fullWidth ? '100%' : '48%',
|
|
shadowColor: '#0F172A',
|
|
shadowOffset: { width: 0, height: pressed ? 2 : 6 },
|
|
shadowOpacity: pressed ? 0.025 : 0.055,
|
|
shadowRadius: pressed ? 8 : 14,
|
|
elevation: pressed ? 1 : 2,
|
|
opacity: pressed ? 0.98 : 1,
|
|
transform: [{ scale: pressed ? 0.992 : 1 }, { translateY: pressed ? 1 : 0 }],
|
|
},
|
|
]}
|
|
>
|
|
<View
|
|
style={[
|
|
styles.iconFrame,
|
|
{
|
|
backgroundColor: `${iconColor || theme.colors.primary}12`,
|
|
borderColor: `${iconColor || theme.colors.primary}18`,
|
|
},
|
|
]}
|
|
>
|
|
<Ionicons name={icon as any} size={22} color={iconColor || theme.colors.primary} />
|
|
</View>
|
|
<Text style={[styles.title, { color: theme.colors.textPrimary }]} numberOfLines={2}>
|
|
{title}
|
|
</Text>
|
|
</Pressable>
|
|
);
|
|
};
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
minHeight: 112,
|
|
justifyContent: 'space-between',
|
|
borderWidth: 1,
|
|
padding: 15,
|
|
gap: 10,
|
|
marginBottom: 14,
|
|
},
|
|
iconFrame: {
|
|
width: 44,
|
|
height: 44,
|
|
borderRadius: 14,
|
|
borderWidth: 1,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
},
|
|
title: {
|
|
fontSize: 13,
|
|
fontFamily: fontFamily.bold,
|
|
letterSpacing: -0.2,
|
|
lineHeight: 17,
|
|
},
|
|
});
|
|
|
|
export const ServiceGridItem = memo(ServiceGridItemComponent);
|