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

2
app/(tabs)/explore.tsx
View File

@@ -1,4 +1,4 @@
import styles from "@/app/styles/indexStyles";
import styles from "@/app/tabStyles/indexStyles";
import React from "react";
import { Text, View } from "react-native";

51
app/(tabs)/index.tsx
View File

@@ -1,16 +1,42 @@
import styles from "@/app/styles/indexStyles";
import styles from "@/app/tabStyles/indexStyles";
import ShowCard from "@/components/ui/ShowCard";
import { useShowContext } from "@/contexts/ShowContext";
import { router } from "expo-router";
import React from "react";
import { Text, View } from "react-native";
import { ActivityIndicator, Text, View } from "react-native";
import {
GestureHandlerRootView,
ScrollView,
} from "react-native-gesture-handler";
export default function HomeScreen() {
const { shows } = useShowContext();
const { shows, error, loading } = useShowContext();
if (loading) {
return (
<View
style={[
styles.mainContainer,
{ justifyContent: "center", alignItems: "center" },
]}
>
<ActivityIndicator size="large" color="#ffffff" />
</View>
);
}
if (error) {
return (
<View
style={[
styles.mainContainer,
{ justifyContent: "center", alignItems: "center" },
]}
>
<Text>Error: {error}</Text>
</View>
);
}
return (
<GestureHandlerRootView>
@@ -20,12 +46,25 @@ export default function HomeScreen() {
</View>
<ScrollView contentContainerStyle={{ paddingBottom: 30 }}>
{shows.map((show) => {
const showLiveBadge = show.endDate === null;
const showLiveBadge = show.running;
return (
<ShowCard
key={show.id}
onPress={() => router.push("/showDetails")}
imageUri={show.bannerUri || show.thumbnailUri}
title={show.title}
onPress={() =>
router.push({
pathname: "/showDetails",
params: {
title: show.title,
bannerUri: show.bannerUri,
description: show.description,
concept: show.concept,
genres: show.genres,
streamingService: show.streamingService,
},
})
}
imageUri={show.bannerUri}
streamingServiceUri={show.streamingService}
genres={show.genres}
{...(showLiveBadge

7
app/_layout.tsx
View File

@@ -13,6 +13,13 @@ export default function RootLayout() {
headerShown: false,
}}
/>
<Stack.Screen
name="participant"
options={{
presentation: "fullScreenModal",
headerShown: false,
}}
/>
</Stack>
</ShowProvider>
);

28
app/participant.tsx Normal file
View File

@@ -0,0 +1,28 @@
import { View, Image, Text } from "react-native";
import styles from "@/app/stackStyles/participantStyles";
export default function ParticipantScreen() {
return (
<View style={styles.mainContainer}>
<View style={styles.handleBar} />
<Text style={styles.participantName}>Calvin Ogara</Text>
<View style={styles.participantInfoSection}>
<Text style={styles.participantInfo}>Single</Text>
<View style={styles.dot} />
<Text style={styles.participantInfo}>24 Jahre</Text>
<View style={styles.dot} />
<Text style={styles.participantInfo}>Köln</Text>
</View>
<Image
source={{
uri: "https://www.fernseh-puls.com/wp-content/uploads/are-you-the-one-calvin-o-im-steckbrief-wir-stellen-euch-den-kandidaten-vor.jpg",
}}
style={styles.participantImage}
/>
<View style={styles.performedShowsSection}>
<Text style={styles.performedShowsTitle}>Auftritte:</Text>
</View>
</View>
);
}

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>
);
}

68
app/stackStyles/participantStyles.tsx Normal file
View File

@@ -0,0 +1,68 @@
import { StyleSheet } from "react-native";
const styles = StyleSheet.create({
mainContainer: {
flex: 1,
backgroundColor: "hsl(221, 39%, 12%)",
},
handleBar: {
backgroundColor: "white",
padding: 3,
alignSelf: "center",
width: 50,
borderRadius: 10,
marginVertical: 20,
},
participantName: {
color: "white",
fontSize: 24,
fontWeight: "600",
textAlign: "center",
marginVertical: 10,
},
participantImage: {
width: "100%",
height: 300,
borderRadius: 0,
alignSelf: "center",
borderTopLeftRadius: 20,
borderTopRightRadius: 20,
},
participantInfoSection: {
width: "100%",
height: "auto",
flexDirection: "row",
justifyContent: "center",
alignItems: "center",
marginBottom: 15,
},
participantInfo: {
color: "hsl(0, 0%, 80%)",
fontSize: 16,
textAlign: "center",
},
dot: {
width: 4,
height: 4,
borderRadius: 3,
backgroundColor: "hsl(0, 0%, 80%)",
marginHorizontal: 7,
marginTop: 2,
},
performedShowsSection: {
marginTop: 0,
width: "100%",
height: "100%",
paddingHorizontal: 20,
paddingVertical: 10,
backgroundColor: "hsl(221, 39%, 0%)",
},
performedShowsTitle: {
fontSize: 16,
fontWeight: "600",
color: "hsl(0, 0%, 80%)",
marginTop: 154,
},
});
export default styles;

137
app/stackStyles/showDetailStyles.tsx Normal file
View File

@@ -0,0 +1,137 @@
import { StyleSheet } from "react-native";
const styles = StyleSheet.create({
mainContainer: {
flex: 1,
backgroundColor: "hsl(221, 39%, 12%)",
},
showImage: {
width: 150,
height: 150,
alignSelf: "center",
},
showMainInfoSection: {
width: "auto",
height: "auto",
alignSelf: "center",
flexDirection: "row",
justifyContent: "center",
alignItems: "center",
bottom: 25,
},
showInfoText: {
color: "hsl(0, 0%, 80%)",
fontSize: 14,
},
dot: {
width: 4,
height: 4,
borderRadius: 3,
backgroundColor: "hsl(0, 0%, 80%)",
marginHorizontal: 7,
marginTop: 2,
},
showBannerLogoContainer: {
width: "100%",
height: 200,
alignSelf: "center",
borderTopLeftRadius: 80,
borderTopRightRadius: 80,
},
showBannerLogo: {
width: "100%",
height: "100%",
borderTopLeftRadius: 30,
borderTopRightRadius: 30,
},
infoContainner: {
width: "100%",
height: "auto",
paddingHorizontal: 20,
paddingVertical: 15,
backgroundColor: "hsl(221, 39%, 0%)",
flexDirection: "row",
gap: 20,
},
infoLabel: {
fontWeight: "300",
color: "hsl(0, 0%, 80%)",
fontSize: 16,
},
participantsDetailsContainer: {
width: "100%",
height: "100%",
backgroundColor: "hsl(221, 39%, 2%)",
},
participantContainer: {
height: 160,
width: 110,
backgroundColor: "hsl(336, 79%, 63%)",
borderRadius: 10,
},
participantSection: {
flexDirection: "row",
flexWrap: "wrap",
gap: 15,
paddingLeft: 15,
paddingTop: 15,
},
seasonsSection: {
width: "100%",
height: 40,
backgroundColor: "hsl(221, 39%, 2%)",
flexDirection: "row",
alignItems: "center",
gap: 10,
paddingHorizontal: 20,
},
seasonList: {
flexDirection: "row",
alignItems: "center",
gap: 10,
paddingLeft: 5,
paddingRight: 5,
},
seasonContainer: {
width: 35,
height: 35,
borderRadius: 5,
backgroundColor: "hsl(0, 0%, 20%)",
justifyContent: "center",
alignItems: "center",
},
seasonLabel: {
color: "white",
fontWeight: "bold",
},
participantLabel: {
color: "white",
fontWeight: "500",
textAlign: "center",
fontSize: 11,
marginTop: 10,
},
seasonsLabel: {
color: "hsl(0, 0%, 80%)",
fontWeight: "500",
fontSize: 16,
},
detailTitle: {
color: "hsl(0, 0%, 100%)",
fontSize: 14,
fontWeight: "bold",
marginTop: 10,
marginLeft: 20,
marginBottom: 5,
},
detailLabel: {
color: "hsl(0, 0%, 80%)",
fontSize: 14,
lineHeight: 20,
width: "90%",
fontWeight: "300",
marginLeft: 20,
marginTop: 5,
},
});
export default styles;

0
app/styles/indexStyles.tsx → app/tabStyles/indexStyles.tsx
View File