update

2025-08-13 21:03:58 +08:00
parent 7d8942e125
commit 41636b5dbc
31 changed files with 907 additions and 91 deletions
@@ -0,0 +1,125 @@
+import {
+  View,
+  Text,
+  ScrollView,
+  Image,
+  Pressable,
+  StyleSheet,
+} from "react-native";
+import React, { useState } from "react";
+import Page from "../../layouts/Page";
+import { background, icons, img } from "../../assets";
+import { Palette } from "../../styles";
+import Style, { gutters, size } from "../../styles/Style";
+import { FONT_FAMILY } from "../../styles/Fonts";
+import Slider from "../../components/Slider";
+
+const MusicDetails = () => {
+  const [fav, setFav] = useState(false);
+
+  return (
+    <Page
+      headerType="NAVIGATION"
+      title="Recherche"
+      backgroundImg={background.libraryBG2}
+    >
+      <ScrollView
+        contentContainerStyle={{
+          flexGrow: 1,
+          paddingTop: 20,
+          paddingBottom: gutters * 2,
+        }}
+        // stickyHeaderIndices={[1]}
+      >
+        <View style={{ gap: 28 }}>
+          <Image source={img.placeholder4} style={styles.img} />
+          <View style={{ ...Style.containerSpaceBetween }}>
+            <View>
+              <Text style={styles.title}>Lust for Life</Text>
+              <Text style={styles.name}>Lana del Rey</Text>
+            </View>
+            <View style={{ ...Style.containerRow, gap: 12 }}>
+              <Pressable onPress={() => setFav(!fav)}>
+                <Image
+                  source={fav ? icons.heart : icons.heartOutline}
+                  style={{ ...size({ size: 24 }) }}
+                  resizeMode="contain"
+                />
+              </Pressable>
+              <Pressable>
+                <Image
+                  source={icons.check}
+                  style={{ ...size({ size: 24 }) }}
+                  resizeMode="contain"
+                />
+              </Pressable>
+            </View>
+          </View>
+        </View>
+        <View style={{ paddingTop: 22 }}>
+          <Slider value={"0:00"} maxValue={"2:00"} />
+          <View style={{ ...Style.containerRow, gap: 24, alignSelf: "center" }}>
+            <Pressable>
+              <Image source={icons.forward} />
+            </Pressable>
+            <Pressable>
+              <Image source={icons.pause} />
+            </Pressable>
+            <Pressable>
+              <Image
+                source={icons.forward}
+                style={{ transform: [{ rotate: "180deg" }] }}
+              />
+            </Pressable>
+          </View>
+        </View>
+        <View style={{ marginTop: 30, gap: 20 }}>
+          <Text
+            style={{
+              fontSize: 14,
+              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 lectus amet
+          </Text>
+          <Text
+            style={{
+              fontSize: 16,
+              color: Palette.white,
+              fontFamily: FONT_FAMILY.InterRegular,
+            }}
+          >
+            Allô{"\n"}Écoute maman est près de toi{"\n"}Il faut lui dire "maman,
+            c'est quelqu'un pour toi"{"\n"}Ah, c'est le monsieur de la dernière
+            fois{"\n"}Bon, je vais la chercher{"\n"}Je crois qu'elle est dans
+            son bain{"\n"}Et je sais pas si elle va pouvoir venir
+          </Text>
+        </View>
+      </ScrollView>
+    </Page>
+  );
+};
+
+export default MusicDetails;
+
+const styles = StyleSheet.create({
+  img: {
+    width: 292,
+    height: 290,
+    borderRadius: 24,
+    alignSelf: "center",
+  },
+  title: {
+    fontSize: 20,
+    color: Palette.white,
+    fontFamily: FONT_FAMILY.HelveticaNeueMedium,
+  },
+  name: {
+    fontSize: 16,
+    color: Palette.white,
+    fontFamily: FONT_FAMILY.HelveticaNeueRegular,
+  },
+});