135 lines
4.6 KiB
JavaScript
135 lines
4.6 KiB
JavaScript
import React, { useState } from "react";
|
|
import { FlatList, Image, Pressable, Text, View } from "react-native";
|
|
import { responsiveHeight } from "react-native-responsive-dimensions";
|
|
import { background, icons } from "../../assets";
|
|
import BorderGradientButton from "../../components/BorderGradientButton";
|
|
import { projectsRef } from "../../config/firebase";
|
|
import useDataFromRef from "../../hooks/useDataFromRef";
|
|
import Page from "../../layouts/Page";
|
|
import { Routes } from "../../navigation";
|
|
import { navigate } from "../../navigation/NavigationService";
|
|
import { Palette, Style } from "../../styles";
|
|
import { FONT_FAMILY } from "../../styles/Fonts";
|
|
import CreateLyricsHeader from "../Writing/components/CreateLyricsHeader";
|
|
import PlaybacksCard from "./components/PlaybacksCard";
|
|
import SongCard from "./components/SongCard";
|
|
|
|
const HitParade = () => {
|
|
const [selected, setSelected] = useState("Chansons");
|
|
const { data: topSongs } = useDataFromRef({
|
|
ref: projectsRef.where("views", ">", 0).orderBy("views", "desc").limit(10),
|
|
simpleRef: false,
|
|
listener: true,
|
|
condition: true,
|
|
});
|
|
|
|
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>
|
|
{selected === "Chansons" && (
|
|
<FlatList
|
|
contentContainerStyle={{
|
|
gap: 10,
|
|
paddingBottom: responsiveHeight(20),
|
|
}}
|
|
data={Array.isArray(topSongs) ? topSongs : []}
|
|
keyExtractor={(item) => item.id}
|
|
renderItem={({ item, index }) => (
|
|
<SongCard
|
|
rank={index + 1}
|
|
title={item?.title || "Sans titre"}
|
|
artist={"MusicLand"}
|
|
coverUrl={item?.coverUrl || null}
|
|
onPress={() =>
|
|
navigate(Routes.MusicDetails, { projectId: item.id })
|
|
}
|
|
/>
|
|
)}
|
|
/>
|
|
)}
|
|
{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>
|
|
);
|
|
};
|
|
|
|
export default HitParade;
|