update

src/components/BorderGradientButton.js

@@ -1,11 +1,16 @@
-import { View, Text, Pressable } from "react-native";
+import { View, Text, Pressable, Image } from "react-native";
 import React from "react";
 import BorderGradient from "./BorderGradient/BorderGradient";
 import { Palette, Style } from "../styles";
 import { BlurView } from "expo-blur";
 import { FONT_FAMILY } from "../styles/Fonts";
+import { size } from "../styles/Style";
 
-const BorderGradientButton = ({ title = "J’ai déjà mes paroles", onPress }) => {
+const BorderGradientButton = ({
+  title = "J’ai déjà mes paroles",
+  onPress,
+  icon,
+}) => {
   return (
     <Pressable onPress={onPress}>
       <BorderGradient
@@ -38,9 +43,12 @@ const BorderGradientButton = ({ title = "J’ai déjà mes paroles", onPress })
               width: "100%",
               height: "100%",
               ...Style.containerCenter,
+              ...Style.containerRow,
               borderRadius: 14,
+              gap: 11,
             }}
           >
+            {icon && <Image source={icon} style={size({ size: 16 })} />}
             <Text
               style={{
                 fontSize: 15,

src/components/GradientButton.js

@@ -1,8 +1,9 @@
-import { View, Text, Pressable } from "react-native";
+import { View, Text, Pressable, Image } from "react-native";
 import React from "react";
 import { LinearGradient } from "./LinearGradient/LinearGradient";
 import { Palette, Style } from "../styles";
 import { FONT_FAMILY } from "../styles/Fonts";
+import { size } from "../styles/Style";
 
 const GradientButton = ({
   title = "",
@@ -10,6 +11,7 @@ const GradientButton = ({
   onPress,
   props,
   containerStyle = {},
+  icon,
 }) => {
   return (
     <Pressable onPress={onPress} style={{ ...containerStyle }}>
@@ -17,13 +19,16 @@ const GradientButton = ({
         colors={colors}
         style={{
           ...Style.containerCenter,
+          ...Style.containerRow,
           height: 50,
           borderRadius: 14,
+          gap: 10,
         }}
         start={{ x: 0, y: 0 }}
         end={{ x: 1, y: 0 }}
         {...props}
       >
+        {icon && <Image source={icon} style={size({ size: 16 })} />}
         <Text
           style={{
             fontSize: 15,

src/components/ItemContainer/ItemContainer.js

@@ -18,7 +18,7 @@ const ItemContainer = ({ height = responsiveHeight(40), children }) => {
       }}
     >
       <View style={styles.blurContainer}>
-        <BlurView intensity={40} style={{ flex: 1, padding: 6 }}>
+        <BlurView intensity={40} tint="dark" style={{ flex: 1, padding: 6 }}>
           {children}
         </BlurView>
       </View>

src/components/ItemContainer/ItemContainer.web.js

@@ -40,6 +40,7 @@ const ItemContainer = ({ height = responsiveHeight(40), children }) => {
       >
         <BlurView
           intensity={40}
+          tint="dark"
           style={{
             padding: 6,
             zIndex: 2,

src/components/Slider.js

@@ -1,16 +1,107 @@
-import Slider from "@react-native-community/slider";
+import { useState } from "react";
+import { StyleSheet, Text, View } from "react-native";
+import { Gesture, GestureDetector } from "react-native-gesture-handler";
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+} from "react-native-reanimated";
+import { LinearGradient } from "./LinearGradient/LinearGradient";
+import { Palette, Style } from "../styles";
+import { FONT_FAMILY } from "../styles/Fonts";
 
-import { Palette } from "../styles";
+const INITIAL_BOX_SIZE = 6;
+
+export default ({ value, maxValue }) => {
+  const offset = useSharedValue(0);
+  const boxWidth = useSharedValue(INITIAL_BOX_SIZE);
+  const [layout, setLayout] = useState(null);
+
+  const SLIDER_WIDTH = layout?.width;
+  const MAX_VALUE = SLIDER_WIDTH - INITIAL_BOX_SIZE;
+
+  const pan = Gesture.Pan().onChange((event) => {
+    offset.value =
+      Math.abs(offset.value) <= MAX_VALUE
+        ? offset.value + event.changeX <= 0
+          ? 0
+          : offset.value + event.changeX >= MAX_VALUE
+          ? MAX_VALUE
+          : offset.value + event.changeX
+        : offset.value;
+
+    const newWidth = INITIAL_BOX_SIZE + offset.value;
+    boxWidth.value = newWidth;
+  });
+
+  const boxStyle = useAnimatedStyle(() => {
+    return {
+      width: INITIAL_BOX_SIZE + offset.value,
+    };
+  });
+
+  const sliderStyle = useAnimatedStyle(() => {
+    return {
+      transform: [{ translateX: offset.value }],
+    };
+  });
 
-export default (props) => {
   return (
-    <Slider
-      style={{ width: "100%", height: 100 }}
-      minimumTrackTintColor={Palette.primary}
-      maximumTrackTintColor={Palette.lightPurple}
-      thumbTintColor={Palette.primary}
-      tapToSeek
-      {...props}
-    />
+    <View onLayout={(e) => setLayout(e.nativeEvent.layout)}>
+      <View style={{ ...styles.sliderTrack, width: SLIDER_WIDTH }}>
+        <Animated.View style={[styles.box, boxStyle]}>
+          <LinearGradient
+            colors={["#F94697", "#7023F7"]}
+            start={{ x: 0, y: 0 }}
+            end={{ x: 1, y: 0 }}
+            style={{ flex: 1, borderRadius: 20 }}
+          />
+        </Animated.View>
+        <GestureDetector gesture={pan}>
+          <Animated.View style={[styles.sliderHandle, sliderStyle]} />
+        </GestureDetector>
+      </View>
+      <View style={{ ...Style.containerSpaceBetween, marginTop: 10 }}>
+        <Text style={styles.time}>{value}</Text>
+        <Text style={styles.time}>{maxValue}</Text>
+      </View>
+    </View>
   );
 };
+
+const styles = StyleSheet.create({
+  box: {
+    height: INITIAL_BOX_SIZE,
+    borderRadius: 20,
+    position: "absolute",
+    zIndex: 1,
+  },
+  sliderHandle: {
+    width: 20,
+    height: 20,
+    backgroundColor: "#f8f9ff",
+    borderRadius: 25,
+    position: "absolute",
+    zIndex: 2,
+    borderWidth: 4,
+    borderColor: "#9B4DFF",
+    shadowColor: "#8951FC",
+    shadowOffset: {
+      width: 0,
+      height: 3,
+    },
+    shadowOpacity: 0.17,
+    shadowRadius: 3.05,
+    elevation: 4,
+  },
+  sliderTrack: {
+    height: 6,
+    backgroundColor: "#0F0C19",
+    borderRadius: 25,
+    justifyContent: "center",
+  },
+  time: {
+    fontSize: 14,
+    color: Palette.white,
+    fontFamily: FONT_FAMILY.InterRegular,
+  },
+});

src/components/modal/ValidateModal.js

@@ -0,0 +1,81 @@
+import { View, Text, Modal } from "react-native";
+import React from "react";
+import { gutters, Palette } from "../../styles";
+import { BlurView } from "expo-blur";
+import CreateLyricsHeader from "../../screens/Writing/components/CreateLyricsHeader";
+import BorderGradientButton from "../BorderGradientButton";
+import GradientButton from "../GradientButton";
+import { FONT_FAMILY } from "../../styles/Fonts";
+
+const ValidateModal = ({ visible, onClose, onPressValidate }) => {
+  return (
+    <Modal
+      animationType="slide"
+      visible={visible}
+      transparent={true}
+      onRequestClose={onClose}
+    >
+      <View
+        style={{
+          flex: 1,
+          justifyContent: "flex-end",
+          paddingBottom: gutters * 1.5,
+          paddingHorizontal: gutters,
+        }}
+      >
+        <CreateLyricsHeader>
+          <View style={{ gap: 30 }}>
+            <View style={{ gap: 15 }}>
+              <View
+                style={{ paddingHorizontal: 15, gap: 2, alignItems: "center" }}
+              >
+                <Text
+                  style={{
+                    fontSize: 22,
+                    color: Palette.white,
+                    fontFamily: FONT_FAMILY.InterSemiBold,
+                    textAlign: "center",
+                  }}
+                >
+                  Attention !
+                </Text>
+                <Text
+                  style={{
+                    fontSize: 16,
+                    color: Palette.white,
+                    fontFamily: FONT_FAMILY.InterRegular,
+                  }}
+                >
+                  Lorsque tu clique sur valider, tu ne pourra plus changer ni le
+                  texte ni la mélodie.{" "}
+                </Text>
+              </View>
+              <Text
+                style={{
+                  fontSize: 16,
+                  color: Palette.white,
+                  fontFamily: FONT_FAMILY.InterRegular,
+                  textAlign: "center",
+                }}
+              >
+                Valider
+              </Text>
+            </View>
+            <View style={{ width: "85%", alignSelf: "center", gap: 15 }}>
+              <BorderGradientButton title="Retour" onPress={onClose} />
+              <GradientButton
+                title="Valider"
+                onPress={() => {
+                  onClose();
+                  onPressValidate?.();
+                }}
+              />
+            </View>
+          </View>
+        </CreateLyricsHeader>
+      </View>
+    </Modal>
+  );
+};
+
+export default ValidateModal;