leonm/musicland
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

end of home

Browse Source
This commit is contained in:
Thomas Demirdjian
2025-10-01 10:49:03 +02:00
parent 4097143559
commit 167e62fcfc
18 changed files with 928 additions and 558 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/cards/PersonaCard/PersonaCard.js
+99
View File
@@ -0,0 +1,99 @@
import React from "react";
import { 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 }) {
const { height: windowHeight } = useWindowDimensions();
return (
<View
style={{
justifyContent: "center",
alignItems: "center",
height: windowHeight,
marginTop: -20,
}}
>
<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>
);
}
src/components/cards/PersonaCard/PersonaCard.web.js
+111
View File
@@ -0,0 +1,111 @@
import React from "react";
import { Text, useWindowDimensions, View } from "react-native";
import { Image } from "expo-image";
import { BlurView } from "expo-blur";
import { 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, index, isLock = true }) {
const isImageOnLeft = index % 2 === 0;
const { height: windowHeight } = useWindowDimensions();
return (
<View
style={{
width: "100%",
justifyContent: "center",
alignItems: "center",
height: windowHeight,
marginTop: 50,
}}
>
<View
style={{
padding: 10,
borderRadius: 10,
backgroundColor: isLock
? "rgba(0, 0, 0, 0.2)"
: "rgba(0, 0, 0, 0.05)",
alignItems: "center",
justifyContent: "center",
width: "90%",
height: "30%",
flexDirection: isImageOnLeft ? "row" : "row-reverse",
}}
>
<Image
source={item.image}
style={{ height: 250, width: 400 }}
contentFit="contain"
/>
<BlurView
intensity={30}
tint="dark"
style={{
flex: 1,
borderRadius: 20,
paddingHorizontal: 18,
paddingVertical: 16,
}}
>
<View
style={{
minHeight: 100,
}}
>
<Text
style={{
fontSize: 20,
color: Palette.white,
fontFamily: FONT_FAMILY.InterSemiBold,
marginBottom: 8,
}}
>
{item.title}
</Text>
<Text
style={{
fontSize: 14,
lineHeight: 20,
color: "rgba(255, 255, 255, 0.7)",
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",
}}
>
<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>
)}
</View>
</BlurView>
</View>
</View>
);
}