53 lines
2.2 KiB
TypeScript
53 lines
2.2 KiB
TypeScript
import { ColorsStatus } from "@/constants/ColorsStatus";
|
|
import Styles from "@/constants/Styles";
|
|
import { useTheme } from "@/providers/ThemeProvider";
|
|
import { ImageBackground, Pressable, View } from "react-native";
|
|
import Text from "./Text";
|
|
|
|
import bgDark from '@/assets/images/bgproject-dark.png';
|
|
import bgLight from '@/assets/images/bgproject-light.png';
|
|
|
|
type Props = {
|
|
content: 'carousel' | 'page';
|
|
children: React.ReactNode;
|
|
title: string
|
|
headerColor: 'primary' | 'warning'
|
|
onPress?: () => void
|
|
contentPosition?: 'top' | 'center'
|
|
titleTail?: number
|
|
height?: number
|
|
};
|
|
export default function PaperGridContent({ content, children, title, headerColor, onPress, contentPosition, titleTail, height }: Props) {
|
|
const { colors, activeTheme } = useTheme();
|
|
const bgSource = activeTheme === 'light' ? bgLight : bgDark;
|
|
return (
|
|
<Pressable onPress={onPress}>
|
|
<View style={[content == 'carousel' ? Styles.wrapGridCaraousel : Styles.wrapGridContent]}>
|
|
{
|
|
headerColor == 'warning' ? (
|
|
<View style={[Styles.headerPaperGrid, ColorsStatus.warning]}>
|
|
<Text numberOfLines={titleTail ? titleTail : undefined} style={[Styles.textSubtitle, Styles.cDefault, { textAlign: 'center' }]}>{title}</Text>
|
|
</View>
|
|
) : (
|
|
<ImageBackground
|
|
source={bgSource}
|
|
resizeMode="cover"
|
|
imageStyle={{ borderTopLeftRadius: 5, borderTopRightRadius: 5 }}
|
|
style={[Styles.headerPaperGrid, { backgroundColor: colors.primary }]}
|
|
>
|
|
<Text numberOfLines={titleTail ? titleTail : undefined} style={[Styles.textSubtitle, Styles.cWhite, { textAlign: 'center' }]}>{title}</Text>
|
|
</ImageBackground>
|
|
)
|
|
}
|
|
<View style={[
|
|
contentPosition && contentPosition == 'top' ? Styles.contentPaperGrid2 : Styles.contentPaperGrid,
|
|
{ backgroundColor: colors.card },
|
|
height ? { height: height } : {}
|
|
]}>
|
|
{children}
|
|
</View>
|
|
</View>
|
|
</Pressable>
|
|
|
|
)
|
|
} |