update

2025-08-20 21:06:21 +08:00
parent abffadc9b9
commit 046a92d866
9 changed files with 343 additions and 67 deletions
@@ -0,0 +1,124 @@
+import { View, Text, Image, Pressable } from "react-native";
+import React from "react";
+import { responsiveHeight } from "react-native-responsive-dimensions";
+import { icons, img } from "../assets";
+import { size } from "../styles/Style";
+import { BlurView } from "expo-blur";
+import { Palette } from "../styles";
+import { FONT_FAMILY } from "../styles/Fonts";
+import Carousel from "react-native-reanimated-carousel";
+
+const Playbacks = () => {
+  return (
+    <View style={{ flex: 1 }}>
+      <Carousel
+        data={Array.from({ length: 5 })}
+        vertical
+        height={responsiveHeight(100)}
+        renderItem={() => (
+          <View
+            style={{
+              height: responsiveHeight(100),
+              position: "relative",
+            }}
+          >
+            <Image
+              source={img.placeholder3}
+              style={{ width: "100%", height: "100%" }}
+            />
+            <View
+              style={{
+                position: "absolute",
+                width: "100%",
+                bottom: 130,
+                gap: 18,
+              }}
+            >
+              <View
+                style={{
+                  alignSelf: "flex-end",
+                  alignItems: "center",
+                  gap: 20,
+                  paddingHorizontal: 13,
+                }}
+              >
+                <View style={{ gap: 6, alignItems: "center" }}>
+                  <Pressable>
+                    <Image
+                      source={img.profile}
+                      style={{
+                        ...size({ size: 45 }),
+                        borderRadius: 100,
+                      }}
+                    />
+                  </Pressable>
+                  <Pressable>
+                    <BlurView
+                      tint="dark"
+                      intensity={20}
+                      style={{
+                        paddingVertical: 6,
+                        paddingHorizontal: 12,
+                        borderRadius: 12,
+                        borderWidth: 1,
+                        borderColor: Palette.white,
+                        overflow: "hidden",
+                      }}
+                    >
+                      <Text
+                        style={{
+                          fontSize: 13,
+                          color: Palette.white,
+                          fontFamily: FONT_FAMILY.InterMedium,
+                        }}
+                      >
+                        Suivre
+                      </Text>
+                    </BlurView>
+                  </Pressable>
+                </View>
+                <Pressable>
+                  <Image
+                    source={icons.heartOutline}
+                    style={size({ size: 26 })}
+                    resizeMode="contain"
+                  />
+                </Pressable>
+                <Pressable>
+                  <Image source={icons.share} style={size({ size: 26 })} />
+                </Pressable>
+              </View>
+              <View style={{ paddingHorizontal: 28 }}>
+                <BlurView
+                  tint="dark"
+                  intensity={20}
+                  style={{
+                    paddingHorizontal: 14,
+                    paddingVertical: 8,
+                    borderRadius: 20,
+                    backgroundColor: Palette.glass,
+                    overflow: "hidden",
+                  }}
+                >
+                  <Text
+                    style={{
+                      fontSize: 12,
+                      color: Palette.white,
+                      fontFamily: FONT_FAMILY.InterRegular,
+                    }}
+                  >
+                    Description chanson. Viverra enim risus enim enim placerat.
+                    Integer pulvinar tristique suscipit risus. Id hendrerit in
+                    odio phasellus interdum
+                  </Text>
+                </BlurView>
+              </View>
+            </View>
+          </View>
+        )}
+      />
+    </View>
+  );
+};
+
+export default Playbacks;