update

src/assets/index.js

@@ -82,6 +82,8 @@ import more from "./icons/more.png";
 import forward from "./icons/forward.png";
 import pause from "./icons/pause.png";
 import share from "./icons/share.png";
+import hitParadeLogo from "./icons/hitParadeLogo.png";
+import calendar from "./icons/calendar.png";
 
 export const icons = {
   bell,
@@ -141,6 +143,8 @@ export const icons = {
   forward,
   pause,
   share,
+  hitParadeLogo,
+  calendar,
 };
 
 import triangle from "./art/triangle.png";
@@ -194,6 +198,7 @@ import playbackBG2 from "./UI/playbackBG2.png";
 import libraryBG from "./UI/libraryBG.png";
 import libraryBG2 from "./UI/libraryBG2.png";
 import profileBG from "./UI/profileBG.png";
+import hitParadeBG from "./UI/hitParadeBG.png";
 
 export const background = {
   writingBG,
@@ -206,6 +211,7 @@ export const background = {
   libraryBG,
   libraryBG2,
   profileBG,
+  hitParadeBG,
 };
 
 import nathalie from "./UI/nathalie.png";

src/components/BorderGradientButton.js

@@ -11,9 +11,11 @@ const BorderGradientButton = ({
   onPress,
   icon,
   titleStyle,
+  containerStyle = {},
+  tint = "dark",
 }) => {
   return (
-    <Pressable onPress={onPress}>
+    <Pressable onPress={onPress} style={{ ...containerStyle }}>
       <BorderGradient
         gradientProps={{
           colors: ["#F94697", "#7023F7"],
@@ -39,7 +41,7 @@ const BorderGradientButton = ({
         >
           <BlurView
             intensity={40}
-            tint="dark"
+            tint={tint}
             style={{
               width: "100%",
               height: "100%",

src/navigation/BottomTab.js

@@ -19,6 +19,7 @@ import ChatStack from "./ChatStack";
 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";
 
 const bottomTabStyles = StyleSheet.create({
   icon: {
@@ -62,7 +63,7 @@ export const BottomTabScreen = () => {
       />
       <BottomTab.Screen
         name={Routes.HitParade}
-        component={ChatStack}
+        component={HitParade}
         options={{
           tabBarLabel: "Hit Parade",
           headerShown: false,

src/screens/HitParade/HitParade.js

@@ -0,0 +1,80 @@
+import { View, Text, Image, Pressable } from "react-native";
+import React, { useState } from "react";
+import Page from "../../layouts/Page";
+import { background, icons } from "../../assets";
+import CreateLyricsHeader from "../Writing/components/CreateLyricsHeader";
+import { Palette, Style } from "../../styles";
+import { FONT_FAMILY } from "../../styles/Fonts";
+import BorderGradientButton from "../../components/BorderGradientButton";
+
+const HitParade = () => {
+  const [selected, setSelected] = useState("Chansons");
+
+  return (
+    <Page backgroundImg={background.hitParadeBG} headerType="NONE">
+      <View style={{ gap: 12, flex: 1 }}>
+        <Image source={icons.musicLandLogo} style={{ alignSelf: "center" }} />
+        <View style={{ flex: 1, gap: 24 }}>
+          <View style={{ gap: 11 }}>
+            <Pressable style={{ position: "absolute", right: 8, top: 20 }}>
+              <Image source={icons.calendar} />
+            </Pressable>
+            <Image
+              source={icons.hitParadeLogo}
+              style={{ alignSelf: "center" }}
+            />
+            <CreateLyricsHeader
+              gradientProps={{
+                colors: ["#F94697", "#7023F7"],
+              }}
+            >
+              <Text
+                style={{
+                  fontSize: 16,
+                  color: Palette.white,
+                  fontFamily: FONT_FAMILY.HelveticaNeueBold,
+                }}
+              >
+                Coups de coeur des utilisateurs catégorie Playbacks
+              </Text>
+              <Text
+                style={{
+                  fontSize: 12,
+                  color: Palette.white,
+                  fontFamily: FONT_FAMILY.InterRegular,
+                }}
+              >
+                Les 3 Playbacks les plus likées du mois reçoivent des{"\n"}
+                tokens.
+              </Text>
+            </CreateLyricsHeader>
+          </View>
+          <View
+            style={{
+              ...Style.containerRow,
+              justifyContent: "space-between",
+            }}
+          >
+            {["Chansons", "Playbacks", "Clips"].map((item, index) => (
+              <BorderGradientButton
+                key={index}
+                title={item}
+                onPress={() => setSelected(item)}
+                tint={selected === item ? "light" : "dark"}
+                containerStyle={{
+                  width: 100,
+                }}
+                titleStyle={{
+                  fontSize: 16,
+                  fontFamily: FONT_FAMILY.HelveticaNeueBold,
+                }}
+              />
+            ))}
+          </View>
+        </View>
+      </View>
+    </Page>
+  );
+};
+
+export default HitParade;