58 lines
1.2 KiB
TypeScript
58 lines
1.2 KiB
TypeScript
import React, { memo } from 'react';
|
|
import { Pressable, StyleSheet, Text } from 'react-native';
|
|
|
|
import { useTheme } from '../../../theme';
|
|
|
|
interface DepositOptionChipProps {
|
|
label: string;
|
|
selected: boolean;
|
|
onPress: () => void;
|
|
}
|
|
|
|
const DepositOptionChipComponent = ({
|
|
label,
|
|
selected,
|
|
onPress,
|
|
}: DepositOptionChipProps) => {
|
|
const theme = useTheme();
|
|
|
|
return (
|
|
<Pressable
|
|
onPress={onPress}
|
|
style={({ pressed }) => [
|
|
styles.chip,
|
|
{
|
|
backgroundColor: selected ? `${theme.colors.primary}12` : theme.colors.surfaceMuted,
|
|
borderColor: selected ? `${theme.colors.primary}40` : theme.colors.cardBorder,
|
|
opacity: pressed ? 0.9 : 1,
|
|
transform: [{ scale: pressed ? 0.98 : 1 }],
|
|
},
|
|
]}
|
|
>
|
|
<Text
|
|
style={[
|
|
styles.label,
|
|
{ color: selected ? theme.colors.primary : theme.colors.textSecondary },
|
|
]}
|
|
>
|
|
{label}
|
|
</Text>
|
|
</Pressable>
|
|
);
|
|
};
|
|
|
|
const styles = StyleSheet.create({
|
|
chip: {
|
|
borderWidth: 1,
|
|
borderRadius: 999,
|
|
paddingHorizontal: 12,
|
|
paddingVertical: 10,
|
|
},
|
|
label: {
|
|
fontSize: 12,
|
|
fontWeight: '700',
|
|
},
|
|
});
|
|
|
|
export const DepositOptionChip = memo(DepositOptionChipComponent);
|