63 lines
No EOL
1.8 KiB
TypeScript
63 lines
No EOL
1.8 KiB
TypeScript
import React, { ReactNode } from 'react';
|
|
import { View, StyleSheet, Text, Image } from 'react-native'; // Add the missing import statement for Image
|
|
import { useTheme } from '../../app/contexts/ThemeContext';
|
|
|
|
interface WidgetProps {
|
|
title?: string;
|
|
text?: string;
|
|
children?: ReactNode;
|
|
image?: any;
|
|
}
|
|
|
|
const Widget: React.FC<WidgetProps> = ({ title, text, children, image }) => { // Add the 'image' prop to the destructuring
|
|
const { colors } = useTheme();
|
|
|
|
const styles = StyleSheet.create({
|
|
widgetContainer: {
|
|
backgroundColor: colors.widgetBackgroundColor,
|
|
borderColor: colors.widgetBorderColor,
|
|
borderRadius: 5,
|
|
padding: 16,
|
|
marginVertical: 8,
|
|
marginHorizontal: 10,
|
|
shadowColor: '#000',
|
|
shadowOffset: {
|
|
width: 0,
|
|
height: 1,
|
|
},
|
|
shadowOpacity: 0.22,
|
|
shadowRadius: 2.22,
|
|
elevation: 3,
|
|
},
|
|
widgetTitle: {
|
|
color: colors.primaryText,
|
|
fontSize: 26,
|
|
fontWeight: 'bold',
|
|
marginBottom: 8,
|
|
textAlign: 'center',
|
|
},
|
|
widgetText: {
|
|
color: colors.primaryText,
|
|
fontSize: 16,
|
|
marginBottom: 8,
|
|
textAlign: 'center',
|
|
},
|
|
imageStyle: {
|
|
width: '100%',
|
|
height: 200,
|
|
borderRadius: 5,
|
|
marginBottom: 8,
|
|
},
|
|
});
|
|
|
|
return (
|
|
<View style={styles.widgetContainer}>
|
|
{!!title && <Text style={styles.widgetTitle}>{title}</Text>}
|
|
{!!text && <Text style={styles.widgetText}>{text}</Text>}
|
|
{!!image && <Image source={image} style={styles.imageStyle} />}
|
|
{children}
|
|
</View>
|
|
);
|
|
};
|
|
|
|
export default Widget; |