update

src/assets/index.js

@@ -84,6 +84,7 @@ import pause from "./icons/pause.png";
 import share from "./icons/share.png";
 import hitParadeLogo from "./icons/hitParadeLogo.png";
 import calendar from "./icons/calendar.png";
+import coin from "./icons/coin.png";
 
 export const icons = {
   bell,
@@ -145,6 +146,7 @@ export const icons = {
   share,
   hitParadeLogo,
   calendar,
+  coin,
 };
 
 import triangle from "./art/triangle.png";
@@ -152,7 +154,6 @@ import circle from "./art/circle.png";
 import square from "./art/square.png";
 import gradientTriangle from "./art/gradientTriangle.png";
 
-import coin from "./art/coin.png";
 import threeCoins from "./art/threeCoins.png";
 import boost from "./art/boost.png";
 import boostBig from "./art/boostBig.png";
@@ -162,7 +163,6 @@ export const art = {
   circle,
   square,
   gradientTriangle,
-  coin,
   threeCoins,
   boost,
   boostBig,
@@ -199,6 +199,7 @@ import libraryBG from "./UI/libraryBG.png";
 import libraryBG2 from "./UI/libraryBG2.png";
 import profileBG from "./UI/profileBG.png";
 import hitParadeBG from "./UI/hitParadeBG.png";
+import homeBG from "./UI/homeBG.png";
 
 export const background = {
   writingBG,
@@ -212,6 +213,7 @@ export const background = {
   libraryBG2,
   profileBG,
   hitParadeBG,
+  homeBG,
 };
 
 import nathalie from "./UI/nathalie.png";

src/navigation/BottomTab.js

@@ -20,6 +20,7 @@ import SettingsStack from "./SettingsStack";
 import Library from "../screens/Library/Library.js";
 import Profile from "../screens/Profile/Profile.js";
 import HitParade from "../screens/HitParade/HitParade.js";
+import Playbacks from "../screens/Playbacks.js";
 
 const bottomTabStyles = StyleSheet.create({
   icon: {
@@ -73,7 +74,7 @@ export const BottomTabScreen = () => {
       />
       <BottomTab.Screen
         name={Routes.Playbacks}
-        component={SettingsStack}
+        component={Playbacks}
         options={{
           tabBarLabel: "Playbacks",
           headerShown: false,

src/screens/HitParade/HitParade.js

@@ -1,4 +1,4 @@
-import { View, Text, Image, Pressable } from "react-native";
+import { View, Text, Image, Pressable, FlatList } from "react-native";
 import React, { useState } from "react";
 import Page from "../../layouts/Page";
 import { background, icons } from "../../assets";
@@ -6,6 +6,9 @@ import CreateLyricsHeader from "../Writing/components/CreateLyricsHeader";
 import { Palette, Style } from "../../styles";
 import { FONT_FAMILY } from "../../styles/Fonts";
 import BorderGradientButton from "../../components/BorderGradientButton";
+import SongCard from "./components/SongCard";
+import { responsiveHeight } from "react-native-responsive-dimensions";
+import PlaybacksCard from "./components/PlaybacksCard";
 
 const HitParade = () => {
   const [selected, setSelected] = useState("Chansons");
@@ -71,6 +74,36 @@ const HitParade = () => {
               />
             ))}
           </View>
+          {selected === "Chansons" && (
+            <FlatList
+              contentContainerStyle={{
+                gap: 10,
+                paddingBottom: responsiveHeight(20),
+              }}
+              data={Array.from({ length: 5 })}
+              renderItem={() => <SongCard />}
+            />
+          )}
+          {selected === "Playbacks" && (
+            <FlatList
+              contentContainerStyle={{
+                gap: 10,
+                paddingBottom: responsiveHeight(20),
+              }}
+              data={Array.from({ length: 5 })}
+              renderItem={() => <PlaybacksCard />}
+            />
+          )}
+          {selected === "Clips" && (
+            <FlatList
+              contentContainerStyle={{
+                gap: 10,
+                paddingBottom: responsiveHeight(20),
+              }}
+              data={Array.from({ length: 5 })}
+              renderItem={() => <PlaybacksCard />}
+            />
+          )}
         </View>
       </View>
     </Page>

src/screens/HitParade/components/CoinBadge.js

@@ -0,0 +1,37 @@
+import { View, Text, Image } from "react-native";
+import React from "react";
+import { Palette, Style } from "../../../styles";
+import { icons } from "../../../assets";
+import { size } from "../../../styles/Style";
+import { FONT_FAMILY } from "../../../styles/Fonts";
+
+const CoinBadge = () => {
+  return (
+    <View style={{ ...Style.containerRow }}>
+      <View
+        style={{
+          paddingLeft: 5,
+          paddingRight: 10,
+          paddingVertical: 3,
+          borderTopLeftRadius: 8,
+          borderBottomLeftRadius: 8,
+          backgroundColor: Palette.glass,
+          right: -10,
+        }}
+      >
+        <Text
+          style={{
+            fontSize: 12,
+            color: Palette.white,
+            fontFamily: FONT_FAMILY.InterRegular,
+          }}
+        >
+          100
+        </Text>
+      </View>
+      <Image source={icons.coin} style={size({ size: 26 })} />
+    </View>
+  );
+};
+
+export default CoinBadge;

src/screens/HitParade/components/PlaybacksCard.js

@@ -0,0 +1,68 @@
+import { View, Text, Image } from "react-native";
+import React from "react";
+import { BlurView } from "expo-blur";
+import { img } from "../../../assets";
+import { Palette, Style } from "../../../styles";
+import { FONT_FAMILY } from "../../../styles/Fonts";
+import CoinBadge from "./CoinBadge";
+
+const PlaybacksCard = () => {
+  return (
+    <BlurView
+      intensity={20}
+      tint="dark"
+      style={{
+        ...Style.containerSpaceBetween,
+        paddingHorizontal: 8,
+        paddingVertical: 4,
+        borderRadius: 12,
+        backgroundColor: Palette.glass,
+        overflow: "hidden",
+      }}
+    >
+      <View
+        style={{
+          ...Style.containerRow,
+          gap: 15,
+        }}
+      >
+        <Text
+          style={{
+            fontSize: 22,
+            color: Palette.white,
+            fontFamily: FONT_FAMILY.InterSemiBold,
+          }}
+        >
+          1
+        </Text>
+        <Image
+          source={img.placeholder3}
+          style={{ width: 67, height: 108, borderRadius: 16 }}
+        />
+        <View>
+          <Text
+            style={{
+              fontSize: 16,
+              color: Palette.white,
+              fontFamily: FONT_FAMILY.InterMedium,
+            }}
+          >
+            Alors on danse
+          </Text>
+          <Text
+            style={{
+              fontSize: 12,
+              color: Palette.white,
+              fontFamily: FONT_FAMILY.InterRegular,
+            }}
+          >
+            Stromae
+          </Text>
+        </View>
+      </View>
+      <CoinBadge />
+    </BlurView>
+  );
+};
+
+export default PlaybacksCard;

src/screens/HitParade/components/SongCard.js

@@ -0,0 +1,72 @@
+import { View, Text, Image } from "react-native";
+import React from "react";
+import { img } from "../../../assets";
+import { BlurView } from "expo-blur";
+import Style, { size } from "../../../styles/Style";
+import { Palette } from "../../../styles";
+import { FONT_FAMILY } from "../../../styles/Fonts";
+import CoinBadge from "./CoinBadge";
+
+const SongCard = () => {
+  return (
+    <View
+      style={{
+        ...Style.containerRow,
+        gap: 6,
+      }}
+    >
+      <Image
+        source={img.placeholder2}
+        style={{ ...size({ size: 60 }), borderRadius: 12 }}
+      />
+      <BlurView
+        intensity={20}
+        style={{
+          flex: 1,
+          borderRadius: 12,
+          overflow: "hidden",
+          paddingHorizontal: 8,
+          paddingVertical: 11,
+          backgroundColor: Palette.glass,
+          ...Style.containerRow,
+        }}
+        tint="dark"
+      >
+        <View style={{ flex: 1, ...Style.containerRow, gap: 15 }}>
+          <Text
+            style={{
+              fontSize: 22,
+              color: Palette.white,
+              fontFamily: FONT_FAMILY.InterSemiBold,
+            }}
+          >
+            1
+          </Text>
+          <View>
+            <Text
+              style={{
+                fontSize: 16,
+                color: Palette.white,
+                fontFamily: FONT_FAMILY.InterMedium,
+              }}
+            >
+              Alors on danse
+            </Text>
+            <Text
+              style={{
+                fontSize: 12,
+                color: Palette.white,
+                fontFamily: FONT_FAMILY.InterRegular,
+              }}
+            >
+              Stromae
+            </Text>
+          </View>
+        </View>
+        <CoinBadge />
+      </BlurView>
+    </View>
+  );
+};
+
+export default SongCard;

src/screens/Home.js

@@ -15,6 +15,7 @@ import DocumentDropZone from "../components/DocumentDropZone";
 import FilesPreview from "../components/FilesPreview";
 
 import { documentsRef } from "../config/firebase";
+import { background } from "../assets";
 
 const accountTypeList = {
   INDIVIDUAL: "Particulier",
@@ -157,68 +158,6 @@ export default ({ containerStyle = {} }) => {
   };
 
   return (
-    <Page
+    <Page backgroundImg={background.homeBG} headerType="NONE"></Page>
-      title="Accueil"
-      scrollEnabled
-      containerStyle={containerStyle}
-      bottomStickyContent={() => (
-        <Button
-          isAbsoluteBottom
-          text="Enregistrer"
-          contentContainerStyle={{ bottom: responsiveHeight(15) }}
-          onPress={onSubmit}
-        />
-      )}
-    >
-      <>
-        <SectionTextHeader title="Type de compte" />
-
-        <OptionSelector
-          optionTypeList={accountTypeList}
-          selected={type}
-          setSelected={(value) => updateBillingDetails("type", value)}
-          containerStyle={{ marginBottom: gutters }}
-          colorMap={accountTypeColorMap}
-        />
-
-        {fieldList.map(
-          ({ key, label, value, type = "default", inputProps = {} }) => (
-            <React.Fragment key={key}>
-              <SectionTextHeader title={label} />
-
-              <Input
-                key={key}
-                placeholder={label}
-                value={value}
-                setValue={(value) => updateBillingDetails(key, value)}
-                containerStyle={{ marginBottom: gutters }}
-                type={type}
-                {...inputProps}
-              />
-            </React.Fragment>
-          )
-        )}
-
-        <DocumentDropZone
-          documentExists={!!documentID}
-          documentID={documentID}
-          collectionRef={documentsRef}
-          setFiles={(files) => updateBillingDetails("files", files)}
-          containerStyle={{
-            alignSelf: "center",
-            height: 150,
-            width: "100%",
-            marginBottom: gutters,
-          }}
-        />
-
-        <FilesPreview
-          files={files}
-          setFiles={(files) => updateBillingDetails("files", files)}
-          documentID={documentID}
-          containerStyle={{}}
-        />
-      </>
-    </Page>
   );
 };

src/screens/Playbacks.js

@@ -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;