Philip Cesar Garay
114 lines
3.7 KiB
JavaScript
114 lines
3.7 KiB
JavaScript
import { View, Text, Image, Pressable, FlatList } 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";
|
|
import SongCard from "./components/SongCard";
|
|
import { responsiveHeight } from "react-native-responsive-dimensions";
|
|
import PlaybacksCard from "./components/PlaybacksCard";
|
|
|
|
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>
|
|
{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>
|
|
);
|
|
};
|
|
|
|
export default HitParade;
|