65 lines
1.3 KiB
TypeScript
65 lines
1.3 KiB
TypeScript
import React from 'react';
|
|
import { StyleSheet, ViewProps, Platform, DimensionValue } from 'react-native';
|
|
import { ThemedView } from '@/components/theme';
|
|
import { Colors } from '@/constants/Colors';
|
|
import { useColorScheme } from '@/hooks/useColorScheme';
|
|
|
|
type ThemedCardProps = ViewProps & {
|
|
width?: DimensionValue;
|
|
height?: DimensionValue;
|
|
padding?: number;
|
|
elevation?: number;
|
|
borderRadius?: number;
|
|
};
|
|
|
|
const ThemedCard: React.FC<ThemedCardProps> = ({
|
|
width = '100%',
|
|
height,
|
|
padding = 16,
|
|
elevation = 3,
|
|
borderRadius = 12,
|
|
style,
|
|
children,
|
|
...restProps
|
|
}) => {
|
|
const scheme = useColorScheme() ?? 'dark';
|
|
|
|
return (
|
|
<ThemedView
|
|
style={[
|
|
styles.card,
|
|
{
|
|
width,
|
|
height,
|
|
padding,
|
|
borderRadius,
|
|
backgroundColor: Colors[scheme].card,
|
|
...Platform.select({
|
|
ios: {
|
|
shadowColor: Colors[scheme].text,
|
|
shadowOffset: { width: 0, height: elevation/2 },
|
|
shadowOpacity: 0.1,
|
|
shadowRadius: elevation,
|
|
},
|
|
android: {
|
|
elevation,
|
|
},
|
|
}),
|
|
},
|
|
style,
|
|
]}
|
|
{...restProps}
|
|
>
|
|
{children}
|
|
</ThemedView>
|
|
);
|
|
};
|
|
|
|
const styles = StyleSheet.create({
|
|
card: {
|
|
overflow: 'hidden',
|
|
},
|
|
});
|
|
|
|
export default ThemedCard;
|