wehub-resource-sync
50 lines
1.0 KiB
TypeScript
50 lines
1.0 KiB
TypeScript
import { View, type ViewProps, StyleSheet } from 'react-native';
|
|
|
|
import { useThemeColor } from '@/hooks/useThemeColor';
|
|
|
|
export type ThemedViewProps = ViewProps & {
|
|
lightColor?: string;
|
|
darkColor?: string;
|
|
variant?: 'default' | 'card';
|
|
className?: string;
|
|
};
|
|
|
|
export function ThemedView({
|
|
style,
|
|
lightColor,
|
|
darkColor,
|
|
variant = 'default',
|
|
...otherProps
|
|
}: ThemedViewProps) {
|
|
const backgroundColor = useThemeColor(
|
|
{ light: lightColor, dark: darkColor },
|
|
variant === 'card' ? 'cardBackground' : 'background'
|
|
);
|
|
const borderColor = useThemeColor({}, 'border');
|
|
|
|
return (
|
|
<View
|
|
style={[
|
|
{ backgroundColor },
|
|
variant === 'card' && styles.card,
|
|
variant === 'card' && { borderColor },
|
|
style,
|
|
]}
|
|
{...otherProps}
|
|
/>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
card: {
|
|
borderRadius: 12,
|
|
borderWidth: 1,
|
|
padding: 16,
|
|
shadowColor: '#000',
|
|
shadowOffset: { width: 0, height: 2 },
|
|
shadowOpacity: 0.05,
|
|
shadowRadius: 3,
|
|
elevation: 2,
|
|
},
|
|
});
|