50 lines
1.0 KiB
TypeScript
50 lines
1.0 KiB
TypeScript
import styled from '@emotion/native';
|
|
import React, { useCallback } from 'react';
|
|
import { TouchableOpacity } from 'react-native';
|
|
|
|
interface CardProps {
|
|
children: React.ReactNode;
|
|
backgroundColor: CardBackgroundColor;
|
|
testID?: string;
|
|
onPress?: () => void;
|
|
}
|
|
|
|
type CardBackgroundColor = 'red' | 'green' | 'grey' | 'black';
|
|
|
|
const Card: React.FC<CardProps> = ({
|
|
children,
|
|
backgroundColor = 'red',
|
|
testID = undefined,
|
|
onPress
|
|
}) => {
|
|
const safeOnPress = useCallback(() => onPress?.(), [onPress]);
|
|
|
|
const content = (
|
|
<Container bgColor={backgroundColor} testID={testID}>
|
|
{children}
|
|
</Container>
|
|
);
|
|
|
|
const touchableContent = (
|
|
<TouchableOpacity onPress={safeOnPress}>
|
|
{content}
|
|
</TouchableOpacity>
|
|
)
|
|
|
|
return (
|
|
onPress ? touchableContent : content
|
|
);
|
|
};
|
|
|
|
const Container = styled.View<{
|
|
bgColor: CardBackgroundColor;
|
|
}>(({ theme, bgColor }) => ({
|
|
padding: 30,
|
|
width: '100%',
|
|
borderRadius: 10,
|
|
overflow: 'hidden',
|
|
backgroundColor: theme.colors[bgColor]
|
|
}));
|
|
|
|
export default Card;
|