Thomas Demirdjian
101 lines
2.8 KiB
JavaScript
101 lines
2.8 KiB
JavaScript
import React from "react";
|
|
import { Platform, Text, useWindowDimensions, View } from "react-native";
|
|
import { Image } from "expo-image";
|
|
import { BlurView } from "expo-blur";
|
|
import { gutters, Palette } from "../../../styles";
|
|
import { FONT_FAMILY } from "../../../styles/Fonts";
|
|
import FontAwesome from "@expo/vector-icons/FontAwesome";
|
|
import palette from "../../../styles/Palette";
|
|
|
|
export default function PersonaCard({ item, isLock = false, height }) {
|
|
const { height: windowHeight } = useWindowDimensions();
|
|
const baseHeight = Math.max(height ?? windowHeight, 1);
|
|
const cardHeight = Platform.OS === "web" ? Math.round(baseHeight) : baseHeight;
|
|
|
|
return (
|
|
<View
|
|
style={{
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
height: cardHeight,
|
|
}}
|
|
>
|
|
<View
|
|
style={{
|
|
borderRadius: 10,
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
width: "100%",
|
|
}}
|
|
>
|
|
<Image
|
|
source={item.image}
|
|
style={{ height: 190, width: "100%" }}
|
|
contentFit="contain"
|
|
/>
|
|
<BlurView
|
|
intensity={30}
|
|
tint="dark"
|
|
style={{
|
|
borderRadius: 20,
|
|
paddingVertical: 20,
|
|
paddingHorizontal: gutters,
|
|
overflow: "hidden",
|
|
width: "100%",
|
|
}}
|
|
>
|
|
<Text
|
|
style={{
|
|
fontSize: 18,
|
|
color: Palette.white,
|
|
fontFamily: FONT_FAMILY.InterSemiBold,
|
|
marginBottom: 15,
|
|
}}
|
|
>
|
|
{item.title}
|
|
</Text>
|
|
<Text
|
|
style={{
|
|
fontSize: 12,
|
|
lineHeight: 20,
|
|
color: Palette.white,
|
|
fontFamily: FONT_FAMILY.InterRegular,
|
|
}}
|
|
>
|
|
{item.description}
|
|
</Text>
|
|
{isLock && (
|
|
<View
|
|
pointerEvents="none"
|
|
style={{
|
|
position: "absolute",
|
|
left: 0,
|
|
right: 0,
|
|
top: 0,
|
|
bottom: 0,
|
|
borderRadius: 20,
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
backgroundColor: "rgba(0,0,0,0.2)",
|
|
}}
|
|
>
|
|
<View
|
|
style={{
|
|
width: 36,
|
|
height: 36,
|
|
borderRadius: 18,
|
|
backgroundColor: "rgba(0,0,0,0.4)",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
}}
|
|
>
|
|
<FontAwesome name="lock" size={24} color={palette.primary} />
|
|
</View>
|
|
</View>
|
|
)}
|
|
</BlurView>
|
|
</View>
|
|
</View>
|
|
);
|
|
}
|