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

animation, dots, dropdown, popover and design fixes

Browse Source
This commit is contained in:
Thomas Demirdjian
2025-10-06 10:13:17 +02:00
parent 3d14e47770
commit bd1ce3d26c
7 changed files with 427 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/cards/PersonaCard/PersonaCard.js
+8 -4
View File
@@ -1,5 +1,5 @@
import React from "react";
import { Platform, Text, useWindowDimensions, View } from "react-native";
import { Text, useWindowDimensions, View } from "react-native";
import { Image } from "expo-image";
import { BlurView } from "expo-blur";
import { gutters, Palette } from "../../../styles";
@@ -7,10 +7,10 @@ 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 }) {
export default function PersonaCard({ item, index, isLock = false, height }) {
const isImageOnLeft = index % 2 === 0;
const { height: windowHeight } = useWindowDimensions();
const baseHeight = Math.max(height ?? windowHeight, 1);
const cardHeight = Platform.OS === "web" ? Math.round(baseHeight) : baseHeight;
const cardHeight = Math.max(height ?? windowHeight, 1);
return (
<View
@@ -38,6 +38,8 @@ export default function PersonaCard({ item, isLock = false, height }) {
tint="dark"
style={{
borderRadius: 20,
borderTopLeftRadius: isImageOnLeft ? 20 : 0,
borderTopRightRadius: isImageOnLeft ? 0 : 20,
paddingVertical: 20,
paddingHorizontal: gutters,
overflow: "hidden",
@@ -74,6 +76,8 @@ export default function PersonaCard({ item, isLock = false, height }) {
top: 0,
bottom: 0,
borderRadius: 20,
borderTopLeftRadius: isImageOnLeft ? 20 : 0,
borderTopRightRadius: isImageOnLeft ? 0 : 20,
justifyContent: "center",
alignItems: "center",
backgroundColor: "rgba(0,0,0,0.2)",
src/components/cards/PersonaCard/PersonaCard.web.js
+14 -2
View File
@@ -1,5 +1,5 @@
import React from "react";
import { Text, useWindowDimensions, View } from "react-native";
import { Text, useWindowDimensions, View, StyleSheet } from "react-native";
import { Image } from "expo-image";
import { BlurView } from "expo-blur";
import { Palette } from "../../../styles";
@@ -44,11 +44,23 @@ export default function PersonaCard({ item, index, isLock = true }) {
tint="dark"
style={{
flex: 1,
borderRadius: 20,
borderTopLeftRadius: isImageOnLeft ? 0 : 20,
borderTopRightRadius: isImageOnLeft ? 20 : 0,
borderBottomLeftRadius: isImageOnLeft ? 0 : 20,
borderBottomRightRadius: isImageOnLeft ? 20 : 0,
paddingHorizontal: 18,
paddingVertical: 16,
overflow: "hidden",
}}
>
{isLock && (
<View
style={{
...StyleSheet.absoluteFillObject,
backgroundColor: "rgba(0,0,0,0.6)",
}}
/>
)}
<View
style={{
minHeight: 100,