Cron1cle/fltr-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: added new screens and designs

Browse Source
This commit is contained in:
Cron1cle
2025-10-06 01:16:10 +02:00
parent badf355a2d
commit 8fb418c6f3
12 changed files with 718 additions and 141 deletions
Download Patch File Download Diff File Expand all files Collapse all files

221
app/showDetails.tsx
View File

@@ -1,15 +1,218 @@
import StackHeader from "@/components/ui/StackHeader";
import { useLocalSearchParams, router } from "expo-router";
import React from "react";
import { View } from "react-native";
import {
Dimensions,
Image,
ScrollView,
Text,
TouchableOpacity,
View,
} from "react-native";
import styles from "./stackStyles/showDetailStyles";
import { parseQueryParams } from "expo-router/build/fork/getStateFromPath-forks";
export default function ShowDetails() {
const { bannerUri, description, concept, genres, streamingService } =
useLocalSearchParams();
const [selectedParticipants, setSelectedParticipants] =
React.useState<boolean>(true);
const [selectedSeason, setSelectedSeason] = React.useState<number>(1);
return (
<View
style={{
flex: 1,
justifyContent: "center",
alignItems: "center",
backgroundColor: "hsl(221, 39%, 12%)",
}}
></View>
<View style={styles.mainContainer}>
<StackHeader />
<ScrollView
showsVerticalScrollIndicator={false}
contentContainerStyle={{
paddingBottom: Dimensions.get("window").height * 0.1,
}}
>
<Image
source={{
uri: "https://images.plus.rtl.de/watch/859291/artwork_square/c3-ni-th-jc/are-you-the-one",
}}
style={styles.showImage}
/>
<View style={styles.showMainInfoSection}>
<Text style={styles.showInfoText}>10 Staffeln</Text>
<View style={styles.dot} />
<Text style={styles.showInfoText}>442 Teilnehmer</Text>
<View style={styles.dot} />
<Text style={styles.showInfoText}>RTL +</Text>
</View>
<View style={styles.showBannerLogoContainer}>
<Image
source={{
uri: bannerUri as string,
}}
style={styles.showBannerLogo}
resizeMode="cover"
/>
</View>
<View style={styles.infoContainner}>
<TouchableOpacity onPress={() => setSelectedParticipants(true)}>
<Text
style={[
styles.infoLabel,
{
fontWeight: selectedParticipants ? "bold" : "normal",
color: selectedParticipants ? "#199edb" : "hsl(0, 0%, 65%)",
},
]}
>
Teilnehmer
</Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => setSelectedParticipants(false)}>
<Text
style={[
styles.infoLabel,
{
fontWeight: !selectedParticipants ? "bold" : "normal",
color: !selectedParticipants ? "#199edb" : "hsl(0, 0%, 65%)",
},
]}
>
Details
</Text>
</TouchableOpacity>
</View>
{selectedParticipants ? (
<>
<View style={styles.seasonsSection}>
<Text style={styles.seasonsLabel}>Staffeln</Text>
<ScrollView
horizontal
showsHorizontalScrollIndicator={false}
contentContainerStyle={styles.seasonList}
>
{[...Array(10).keys()].map((season) => (
<TouchableOpacity
key={season}
style={[
styles.seasonContainer,
{
backgroundColor:
selectedSeason === season + 1
? "#199edb"
: "hsl(0, 0%, 20%)",
},
]}
onPress={() => setSelectedSeason(season + 1)}
>
<Text style={styles.seasonLabel}>{season + 1}</Text>
</TouchableOpacity>
))}
</ScrollView>
</View>
<View
style={[
styles.participantsDetailsContainer,
styles.participantSection,
]}
>
{[0, 1, 2].map((column) => (
<TouchableOpacity
key={column}
style={styles.participantContainer}
onPress={() =>
router.push({
pathname: "/participant",
})
}
>
{column === 0 && (
<>
<Image
source={{
uri: "https://amp.infranken.de/storage/image/2/2/7/8/4408722_hat-calvin-o-bei-vip-are-you-the-one-eine-favoritin-die-indizien_noscale_1EywMa_HqGfqa.jpg",
}}
style={{
width: "100%",
height: "100%",
borderRadius: 10,
}}
/>
<Text style={styles.participantLabel}>
Calvin Lesra Ogara
</Text>
</>
)}
{column === 1 && (
<>
<Image
source={{
uri: "https://content.promiflash.de/article-images/square600/love-island-granate-sandra-2.jpg",
}}
style={{
width: "100%",
height: "100%",
borderRadius: 10,
}}
/>
<Text style={styles.participantLabel}>Sandra Janina</Text>
</>
)}
{column === 2 && (
<>
<Image
source={{
uri: "https://static.wikia.nocookie.net/toohottohandle/images/e/e4/GER_S1_Kevin_Njie.jpg/revision/latest?cb=20240225192711",
}}
style={{
width: "100%",
height: "100%",
borderRadius: 10,
}}
/>
<Text style={styles.participantLabel}>Kevin Njie</Text>
</>
)}
</TouchableOpacity>
))}
{[0, 1, 2].map((column) => (
<View
key={column}
style={[styles.participantContainer, { marginTop: 20 }]}
>
{column === 0 && (
<>
<Image
source={{
uri: "https://content.promiflash.de/article-images/square600/sidar-are-you-the-one-kandidat-2023.jpg",
}}
style={{
width: "100%",
height: "100%",
borderRadius: 10,
}}
/>
<Text style={styles.participantLabel}>Single Sidar</Text>
</>
)}
</View>
))}
</View>
</>
) : (
<View style={styles.participantsDetailsContainer}>
<Text style={styles.detailTitle}>Beschreibung:</Text>
<Text style={styles.detailLabel}>{description}</Text>
<Text style={styles.detailTitle}>Konzept:</Text>
<Text style={styles.detailLabel}>{concept}</Text>
<Text style={styles.detailTitle}>Genres:</Text>
<Text style={styles.detailLabel}>{genres}</Text>
<Text style={styles.detailTitle}>Produktion:</Text>
<Text style={styles.detailLabel}>{streamingService}</Text>
</View>
)}
</ScrollView>
</View>
);
}