47 lines
922 B
TypeScript
47 lines
922 B
TypeScript
import React, { memo } from 'react';
|
|
import {
|
|
StyleSheet,
|
|
Text,
|
|
View,
|
|
} from 'react-native';
|
|
|
|
import { useTheme } from '../../../theme';
|
|
|
|
interface DepositRatePillProps {
|
|
rate: number;
|
|
}
|
|
|
|
const DepositRatePillComponent = ({ rate }: DepositRatePillProps) => {
|
|
const theme = useTheme();
|
|
|
|
return (
|
|
<View
|
|
style={[
|
|
styles.pill,
|
|
{
|
|
backgroundColor: 'rgba(53, 214, 163, 0.12)',
|
|
borderColor: theme.colors.cardBorder,
|
|
borderRadius: theme.radius.pill,
|
|
},
|
|
]}
|
|
>
|
|
<Text style={[styles.text, { color: theme.colors.accent }]}>Up to {rate}% p.a.</Text>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
const styles = StyleSheet.create({
|
|
pill: {
|
|
alignSelf: 'flex-start',
|
|
borderWidth: 1,
|
|
paddingHorizontal: 12,
|
|
paddingVertical: 6,
|
|
},
|
|
text: {
|
|
fontSize: 12,
|
|
fontWeight: '700',
|
|
},
|
|
});
|
|
|
|
export const DepositRatePill = memo(DepositRatePillComponent);
|