63 lines
1.4 KiB
TypeScript
63 lines
1.4 KiB
TypeScript
import { useTheme, Box, Pressable } from 'native-base';
|
|
import React from 'react';
|
|
import { useColorScheme } from 'react-native';
|
|
import { useSelector } from 'react-redux';
|
|
import { RootState } from '../state/Store';
|
|
|
|
export const CardBorderRadius = 10;
|
|
|
|
const cardBorder = (theme: ReturnType<typeof useTheme>) => ({
|
|
borderColor: theme.colors.text[100],
|
|
borderRadius: CardBorderRadius,
|
|
borderWidth: 1,
|
|
});
|
|
|
|
type CardProps = Parameters<typeof Box>[0] & {
|
|
onPress: () => void;
|
|
};
|
|
|
|
const getBgColor = (isPressed: boolean, isHovered: boolean, colorScheme: 'light' | 'dark') => {
|
|
if (colorScheme === 'dark') {
|
|
if (isPressed) {
|
|
return 'gray.800';
|
|
}
|
|
if (isHovered) {
|
|
return 'gray.700';
|
|
}
|
|
return undefined;
|
|
}
|
|
if (isPressed) {
|
|
return 'coolGray.200';
|
|
}
|
|
if (isHovered) {
|
|
return 'coolGray.100';
|
|
}
|
|
return undefined;
|
|
};
|
|
|
|
const Card = (props: CardProps) => {
|
|
const theme = useTheme();
|
|
const colorScheme = useSelector((state: RootState) => state.settings.local.colorScheme);
|
|
const systemColorMode = useColorScheme();
|
|
|
|
return (
|
|
<Pressable onPress={props.onPress}>
|
|
{({ isHovered, isPressed }) => (
|
|
<Box
|
|
{...props}
|
|
style={[props.style, cardBorder(theme)]}
|
|
bg={getBgColor(
|
|
isPressed,
|
|
isHovered,
|
|
(colorScheme === 'system' ? systemColorMode : colorScheme) ?? 'light'
|
|
)}
|
|
>
|
|
{props.children}
|
|
</Box>
|
|
)}
|
|
</Pressable>
|
|
);
|
|
};
|
|
|
|
export default Card;
|